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.

score 45 · Accepted Answer · answered Oct 25 '16 at 16:56

45

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

answered Oct 25 '16 at 16:56

Brocco

62,737
12
70
76

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. – George Bora Oct 26 '16 at 06:30
1

class generation works the same way , except classes don't generate their own directory by default. – Brocco Oct 26 '16 at 11:12
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. – George Bora Oct 26 '16 at 12:43
1

OK. I'd suggest you add your thoughts/opinions to this github issue... https://github.com/angular/angular-cli/issues/2806 – Brocco Oct 26 '16 at 15:34
Thanks for the link. – George Bora Oct 26 '16 at 20:48

score 11 · Answer 2 · answered Nov 20 '17 at 10:45

11

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

answered Nov 20 '17 at 10:45

Ivan Maia

251
2
6

3

this create a component not a class – A. Morel Dec 12 '17 at 09:37
use `ng g class` instead (`ng g cl` in Angular 5). One full day lost with the `ng g c` command – user9869932 Apr 19 '18 at 16:48

score 7 · Answer 3 · answered Feb 22 '18 at 00:37

7

 ng g cl model/UserInfo
works fine in angular5

answered Feb 22 '18 at 00:37

Karthikeyan Karunanithi

69
1
4

score 7 · Answer 4 · edited Jun 11 '20 at 21:03

7

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

edited Jun 11 '20 at 21:03

BuZZ-dEE

6,075
12
66
96

answered Oct 13 '18 at 06:40

ayush mishra

103
2
8

score 5 · Answer 5 · edited Feb 09 '17 at 11:21

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

edited Feb 09 '17 at 11:21

Hellium

7,206
2
19
49

answered Oct 25 '16 at 14:08

Mourad Idrissi

3,455
5
17
29

could please you post the exact command I should use I tried with the one you posted and it didn't work. – George Bora Oct 25 '16 at 14:14
2

ng g class app/models/todo (u begin by the app folder) – Mourad Idrissi Oct 25 '16 at 14:19
The first suggestion gave a path error, the second didn't create a models folder but created a class with models in the name. – George Bora Oct 25 '16 at 14:36
1

can u give me the structure of ur project ! – Mourad Idrissi Oct 25 '16 at 15:09
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 Oct 25 '16 at 15:18
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. – George Bora Oct 25 '16 at 15:20
angular-cli : 1.0.0-beta.17 node : 4.2.4 webpack : 2.1.0-beta.25 typescript : 2.0.3 – Mourad Idrissi Oct 25 '16 at 15:21

score 3 · Answer 6 · answered Feb 27 '18 at 15:19

3

adding to Karthikeyan Karunanithi simple answer,

ng g i model/UserInfo

works great if you wanted an interface...

answered Feb 27 '18 at 15:19

Robbotnik

557
8
8

score 3 · Answer 7 · answered May 24 '18 at 23:18

3

ng g cl models//todo-class

result ~/project/src/app/models/todo-class.ts

export class TodoClass {}

answered May 24 '18 at 23:18

Elton Sandré

372
3
7

score 2 · Answer 8 · answered May 26 '18 at 07:08

https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services

Generating Components, Classes, Directives, Guards, Interfaces, Enums, Pipes and Services, Modules, Libraries

You can use the ng generate (or just ng g) command to generate Angular artifacts:

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

if in the directory src/app you can also run

ng g component feature/new-cmp

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

You can find all possible blueprints in the table below:

Scaffold    Usage
Component   ng g component my-new-component
Directive   ng g directive my-new-directive
Pipe    ng g pipe my-new-pipe
Service ng g service my-new-service
**Class ng g class my-new-class**
Guard   ng g guard my-new-guard
Interface   ng g interface my-new-interface
Enum    ng g enum my-new-enum
Module  ng g module my-module

angular-cli will add reference to components, directives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow this steps:

ng g module new-module to create a new module

call ng g component new-module/new-component

This should add the new component, directive or pipe reference to the new-module you've created.

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

8 Answers8

components support relative path generation

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

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

but if you were to run

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

if in the directory src/app you can also run

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