How to generate your classes in a specific folder with Angula2 CLI?

Question

I usually generate classes with the angular 2 cli with the following command:

ng g class todo

How can I tell the cli to generate the classes in a particular folder, for example a models folder.

The documentation has an example where they generate a component in a specific folder but I've had no success with the class option

I've tried the following options:

ng g class models/todo

ng g class ../models todo

ng g class models todo

They result in either an error that the path is invalid, which makes me think that the option is supported but I can't figure it out or in the case of the latter merges the intended folder name with the class name.

Solution 1

Generated items for the Angular CLI are relative...

if you are in the root dir (or the source dir) you are perceived to be in the app dir...

~/me/foo > ng g c bar
// ~/me/foo/src/app/bar/bar.component*

~/me/foo/src > ng g c bar
// ~/me/foo/src/app/bar/bar.component*

if you are in the app directory or further down the folder structure you will generate to where you are...

~/me/foo/src/app/feature > ng g c bar
// ~/me/foo/src/app/feature/bar/bar.component*

~/me/foo/src/app/feature > ng g c ../bar
// ~/me/foo/src/app/bar/bar.component*

Note: if you try to generate into a dir that does not exist, it will error...

~/me/foo/src/app > ng g c a/b/c/d/e/f/g/bar
// Error

Solution 2

To create a todo component inside the models folder in your project, just make sure you are in the project's root folder and type:

ng g c /models/todo

Also, if you want to specify a the declaring module's file name, you can use the -m option.

For example, if you have a models module, and want to update that module for declare your new todo's component:

ng g c /models/todo -m model

Regards

Solution 3

For generating class in Angular 4/5/6

Just right click on the folder in which you want to create the class and select the folder open in terminal

then inside the terminal use

ng g class classname --type=model

Solution 4

 ng g cl model/UserInfo
works fine in angular5

Solution 5

ng generate component my-new-component

ng g component my-new-component # using the alias

components support relative path generation

if in the directory src/app/feature/ and you run

ng g component new-cmp

your component will be generated in src/app/feature/new-cmp

but if you were to run

ng g component ../newer-cmp

your component will be generated in src/app/newer-cmp

that works for classes also

check : Github angular-cli

View more solutions

Comments

[George Bora]

could please you post the exact command I should use I tried with the one you posted and it didn't work.

[Mourad Idrissi]

ng g class app/models/todo (u begin by the app folder)

[George Bora]

The first suggestion gave a path error, the second didn't create a models folder but created a class with models in the name.

[Mourad Idrissi]

can u give me the structure of ur project !

[George Bora]

It's the basic project structure, what I get after ng new application_name, what version of the cli and node are you using ?

[George Bora]

And the latest command you entered still gives me the path error, I haven't modified the structure of the folders that ng created for me so in that respect I'm safe.

[Mourad Idrissi]

angular-cli : 1.0.0-beta.17 node : 4.2.4 webpack : 2.1.0-beta.25 typescript : 2.0.3

[George Bora]

The component example already worked (that was in the documentation), what I'm interested is in classes, nonetheless your answer did provide the key: if I create the folder before hand I can generate the class directly to it.

[Brocco]

class generation works the same way , except classes don't generate their own directory by default.

[George Bora]

Yes that is the whole point of my question can I generate a specific directory when I generate my class, the cli can't but if I create the folder before hand I can generate the class directly in it from the cli.

[Brocco]

OK. I'd suggest you add your thoughts/opinions to this github issue... github.com/angular/angular-cli/issues/2806

[George Bora]

Thanks for the link.

[A. Morel]

this create a component not a class

[user9869932]

use ng g class instead (ng g cl in Angular 5). One full day lost with the ng g c command