Create component & add it to a specific module with Angular-CLI

Question

I'm starting to use angular-cli and I've already read a lot to find an answer about what I want to do...no success, so I came here.

Is there a way to create a component to a new module?

e.g.: ng g module newModule

ng g component newComponent (how to add this component to newModule??)

because the angular-cli default behavior is to put all new components inside app.module. I would like to choose where my component will be, so that I can create separated modules and won't have all my components inside app.module . It is possible to do that using angular-cli or do I have to do this manually?

score 350 · Accepted Answer · edited Mar 07 '22 at 15:59

350

To create a component as part of a module you should

ng g module newModule to generate a module,
cd newModule to change directory into the newModule folder
ng g component newComponent to create a component as a child of the module.

UPDATE: Angular 9

Now it doesn't matter what folder you are in when generating the component.

ng g module NewModule to generate a module.
ng g component new-module/new-component to create NewComponent.

Note: When the Angular CLI sees new-module/new-component, it understands and translates the case to match new-module -> NewModule and new-component -> NewComponent. It can get confusing in the beginning, so easy way is to match the names in #2 with the folder names for the module and component.

edited Mar 07 '22 at 15:59

Mahee Gamage

413
4
12

answered Nov 17 '16 at 08:22

Alexander Ciesielski

10,506
5
45
66

102

You can also stay in the project root and prefix the component with the module name `ng g component moduleName/componentName`. – JayChase Nov 17 '16 at 12:53
3

With Angular CLI version 1.6.8, I was always getting error sying that 'specified module doesn't exists', when I sepcify an existing module. It worked when I tried the following command: *ng generate service service1 --module=module1/module1.module.ts*. Note: my service name is *service1* and my module name is *module1* – Diallo Feb 11 '18 at 17:58
@JayChase's answer is the better option – shteeven Mar 13 '18 at 16:07
@Alexander, though files are being generate its module entry is not working for me, I mean command is not registering component in module.ts, can you help me with this? – sajal rajabhoj Jun 11 '18 at 11:16
If you're getting this error: `Could not find an NgModule. Use the skip-import option to skip importing in NgModule.` do step 2 above. I had to cd into the src/app dir. – goku_da_master Jun 16 '18 at 00:28
26

This would create a new component in the specified directory but wouldn't register it in the module. It will register it in the app.module. you would need to specify the module with the `--module` option like: `ng g component --module=` – Vinit Sarvade Sep 09 '18 at 11:19
3

outdated as of 6th Oct, Angular 6 – tom87416 Oct 06 '18 at 07:57
4

Outdated. Angular 6 does not depend on folder structures to see which module the component is in. Two modules can be in the same directory. @daniel's answer https://stackoverflow.com/a/44812014/511719 works for Angular 6. – Guo Nov 05 '18 at 08:18
This answer works updates the current folder module with component info. If you use the below command from root folder `ng g component moduleName/componentName` then the app module is updated. – Ram Jul 15 '19 at 02:52
you can add a module into a specific component doing `ng g module pages/pages-module --flat` or add a module for router into a specific component folder `ng g module members/member-routing --flat` – Rafael Guimarães Dec 21 '19 at 16:17

score 254 · Answer 2 · edited May 02 '23 at 22:39

254

ng g component nameComponent --module=app.module.ts

In Angular 14:

ng g component nameComponent --module=app --dry-run

edited May 02 '23 at 22:39

nullromo

2,165
2
18
39

answered Jun 28 '17 at 20:30

Dacosta

2,653
1
10
7

21

the other answers work, but this is the most efficient. Its worth adding `--dry-run` to the end of that just to see what will be affected, it's a nice sanity check – tony09uk Dec 12 '18 at 21:55
3

`ng g component path/to/myComponent --module=app.module.ts --dry-run` is a very useful command; just to make sure your component is created in the correct directory. – theman0123 Mar 06 '20 at 19:15
1

You can use a relative path in the module option, as follows `ng g component componentName --module=../../sibling/path/custom.module.ts --dry-run` – William Ardila Mar 15 '21 at 21:49
`ng g c newComponent --module app` works as well. I used this in the terminal while not in the same directory as the app.module.ts file and it put it in the correct module – camstar915 Nov 29 '21 at 01:12

score 82 · Answer 3 · answered Jan 31 '17 at 12:16

82

Not sure if maybe Alexander Ciesielski's answer was correct at the time of writing, but I can verify that this no longer works. It doesn't matter which directory in the project you run the Angular CLI. If you type

ng g component newComponent

it will generate a component and import it into the app.module.ts file

The only way you can use CLI to automatically import it into another module is by specifying

ng g component moduleName/newComponent

where moduleName is a module you've already defined in your project. If the moduleName doesn't exist, it'll put the component in moduleName/newComponent directory but still import it into app.module

answered Jan 31 '17 at 12:16

Diskdrive

18,107
27
101
167

2

it was the right answer for me at the time..it works properly. I create a pull request to add this information to the docs. One of it's contributors ask me to remove cd-ing part..in the end will be 1. `ng g module newModule` 2. `ng g component new-module/newComponent` according to him should be new-module instead of newModule – Elmer Dantas Jan 31 '17 at 13:23
Just to point out, using technique by Alexander Ciesielski and works as expected. I should note, I did not need to create component simply needed to create folder. So I just `mkdir` a folder, and then ran n g component newComponent inside of newly created folder. – Charlie-Greenman Apr 23 '17 at 03:10
3

I would say that full answer is `ng g component moduleName/newComponent -m moduleName` – slavugan Jul 26 '17 at 09:09
In my case the component name is same as the module name so I created the module with `ng generate module {modComName}` 1) Created the folder 2) Created a module file inside the folder of same name ; the command `ng generate component {modComName}` actually 1) Created a component file inside the folder of same name 2) Modified the module to import the component – Nate Anderson May 27 '18 at 14:36
Be careful if you create a module and import it into a base module; `ng` adds imports to the *end* of the array; but you may want : ["The order of the routes in the configuration matters and this is by design."](https://angular.io/guide/router#module-import-order-matters) – Nate Anderson May 27 '18 at 14:59

cobolstinks · Answer 4 · 2017-12-15T17:53:39.697

55

I didn't find an answer that showed how to use the cli to generate a component inside a top level module folder, and also have the component automatically added the the module's declaration collection.

To create the module run this:

ng g module foo

To create the component inside the foo module folder and have it added to the foo.module.ts's declaration collection run this:

ng g component foo/fooList --module=foo.module.ts

And the cli will scaffold out the module and component like this:

--EDIT the new version of the angular cli behaves differently. 1.5.5 doesn't want a module file name so the command with v1.5.5 should be

ng g component foo/fooList --module=foo

edited Dec 15 '17 at 17:53

answered Aug 04 '17 at 14:19

cobolstinks

6,801
16
68
97

2

Yay for the `--module` argument; the [docs](https://github.com/angular/angular-cli/wiki/generate-module) say "Allows specification of the declaring module." ; I would add `--module` specifies which *existing* module should be *modified* to import the module you are *about to create* – Nate Anderson May 27 '18 at 14:27
2

@TheRedPea I believe you meant to say " --module specifies which existing module should be modified to import the component you are ..." – cobolstinks Jul 03 '18 at 14:14
Yep you're right! Existing module modified with reference to new *component* – Nate Anderson Jul 03 '18 at 17:04

score 17 · Answer 5 · edited Nov 20 '18 at 12:17

17

You can try below command, which describes the,

ng -> Angular 
g  -> Generate
c  -> Component
-m -> Module

Then your command will be like:

ng g c user/userComponent -m user.module

edited Nov 20 '18 at 12:17

keepAlive

6,369
5
24
39

answered Jul 01 '18 at 22:12

user2662006

2,246
22
16

this works for angular 12, there's no need for `.ts` after `.module` so this is perfect. and as tony mentioned, It's worth adding `--dry-run` to the end of that just to see what will be affected, it's a nice sanity check – Kingston Fortune Sep 08 '21 at 01:27

score 13 · Answer 6 · edited Apr 04 '18 at 02:41

13

For Angular v4 and Above, simply use:

ng g c componentName -m ModuleName

edited Apr 04 '18 at 02:41

Stephen Rauch

47,830
31
106
135

answered Apr 04 '18 at 02:23

Shemang David

171
2
11

1

Throws an error `Specified module does not exist` whereas module existed – Pardeep Jain May 28 '18 at 10:20
1

You don't specify the name of the module, you specify the module's filename. – Roger Jun 06 '18 at 08:46
2

Works like charm! e.g. if your module file is `user-settings.module.ts` and you want to add a component `public-info` then the command will be: `ng g c PublicInfo -m user-settings` – Spiral Out May 19 '19 at 11:57
1

This is the simplest and cleanest answer! – Barnee Apr 29 '20 at 17:36

score 11 · Answer 7 · answered Nov 23 '17 at 16:45

11

this is what worked for me :

1 -->  ng g module new-module

2 -->  ng g c new-module/component-test --module=new-module/new-module.module.ts

If you want to generate a component without its directory use --flat flag.

answered Nov 23 '17 at 16:45

Mohamed Makkaoui

393
6
10

don't need to write .ts – Lapenkov Vladimir Jun 30 '18 at 07:10
--module=path-to-module worked form me thanks @Mohamed Makkaoui – Ian Poston Framer Sep 18 '18 at 06:24

Elhakim · Answer 8 · 2019-04-06T15:45:15.860

9

First, you generate a module by executing.

ng g m modules/media

this will generate a module called media inside modules folder.

Second, you generate a component added to this module

ng g c modules/media/picPick --module=modules/media/media.module.ts

the first part of the command ng g c modules/media/picPick will generate a component folder called picPick inside modules/media folder witch contain our new media module.

the second part will make our new picPick component declared in media module by importing it in the module file and appending it to declarations array of this module.

edited Apr 06 '19 at 15:45

answered Apr 05 '19 at 19:29

Elhakim

404
5
10

2

Can you please explain more to how this answers the question? – Sterling Archer Apr 05 '19 at 19:46
Thank you for your note, I edited my answer as I'm a future reader @CertainPerformance – Elhakim Apr 06 '19 at 15:47

score 9 · Answer 9 · answered May 05 '20 at 06:01

First generate module:

ng g m moduleName --routing

This will create a moduleName folder then Navigate to module folder

cd moduleName

And after that generate component:

ng g c componentName --module=moduleName.module.ts --flat

Use --flat for not creating child folder inside module folder

score 7 · Answer 10 · edited May 13 '20 at 14:43

7

ng g c componentName --module=path-to-your-module-from-src-folder

example:

ng g c testComponent --module=/src/app/home/test-component/test-component.module

edited May 13 '20 at 14:43

double-beep

5,031
17
33
41

answered May 13 '20 at 14:41

Ivailo Dimitrov

71
1
2

score 6 · Answer 11 · answered May 20 '20 at 19:11

A common pattern is to create a feature with a route, a lazy loaded module, and a component.

Route: myapp.com/feature

app-routing.module.ts

{ path: 'feature', loadChildren: () => import('./my-feature/my-feature.module').then(m => m.MyFeatureModule) },

File structure:

app   
└───my-feature
│   │   my-feature-routing.module.ts
│   │   my-feature.component.html
│   │   my-feature.component.css
│   │   my-feature.component.spec.ts
│   │   my-feature.component.ts
│   │   my-feature.module.ts

This can all be done in the cli with:

ng generate module my-feature --module app.module --route feature

Or shorter

ng g m my-feature --module app.module --route feature

Or if you leave out the name the cli will prompt you for it. Very useful when you need to create several features

ng g m --module app.module --route feature

score 6 · Answer 12 · answered Jun 13 '21 at 12:02

I have used the following command in the angular CLI version 8.3, and it worked by generating a specific component declared in a specific module.

move to the specific folder were we need the component to be generated

cd <component-path>
Call the below generate command

ng g c <component-name> --module=<module-name>

Example

 `ng g c login --module= app`

score 5 · Answer 13 · answered Apr 14 '21 at 10:01

TL;DR
Try this. Specify the module name by module's file name(excluding the .ts extension)
ng g c components/path-to-a-folder/component-name --module=app.module

Notes:

ng g c is short for ng generate component
If you want the component to be added in a different module, let's say in file collection.module.ts then use --module=collection.module instead of --module=app.module & you should be good to go.

score 3 · Answer 14 · edited Feb 12 '20 at 06:46

3

Go to module level/we can also be in the root level and type below commands

ng g component "path to your component"/NEW_COMPONENT_NAME -m "MODULE_NAME"

Example :

ng g component common/signup/payment-processing/OnlinePayment -m pre-login.module

edited Feb 12 '20 at 06:46

Shiva Nayak Dharavath

3,082
1
14
19

answered Sep 13 '19 at 09:57

Sandeep Patel

2,069
2
14
20

score 3 · Answer 15 · answered Sep 11 '20 at 13:24

Read the description of --route https://angular.io/cli/generate#module-command,

To archive such, you must add the route of that component-module to somewhere and specify the route name.

   ng generate module component-name --module=any-parent-module --route=route-path

score 3 · Answer 16 · answered May 24 '21 at 15:25

I don't know if this is what brought you guys here, but I wanted to create a folder with a module, routing and component files. I wanted the component to be declared to the module I created.

For this I found this command to be really helpful.

ng g m path/to/folder/component --routing && ng g c path/to/folder/component

This should create a folder with 6 files.

CREATE path/to/folder/component/component-routing.module.ts (253 bytes)
CREATE path/to/folder/component/component.module.ts (297 bytes)
CREATE path/to/folder/component/component.component.html (26 bytes)
CREATE path/to/folder/component/component.component.spec.ts (655 bytes)
CREATE path/to/folder/component/component.component.ts (295 bytes)
CREATE path/to/folder/component/component.component.scss (0 bytes)
UPDATE path/to/folder/component/component.module.ts (379 bytes)

You can remove --routing if you don't want routing.

score 2 · Answer 17 · answered May 05 '20 at 19:28

1.- Create your feature module as usual.

ng generate module dirlevel1/module-name

2.- You can specify the ROOT PATH of your project in --module ( only in --module, (/) root points to your PROJECT ROOT and IS NOT THE SYSTEM ROOT!!!)

ng generate component dirlevel1/component-name --module /src/app/dirlevel1/module-name.module.ts

Real Example:

ng generate module stripe/payment-methods-list

ng generate component stripe/payment-methods-list --module=/src/app/stripe/payment-methods-list/payment-methods-list.module.ts

Output:

CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.scss (0 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.html (39 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.spec.ts (768 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.ts (322 bytes)
UPDATE src/app/stripe/payment-methods-list/payment-methods-list.module.ts (311 bytes)
[OK] Generated component!

Tested with Angular CLI: 9.1.4

score 2 · Answer 18 · answered Mar 06 '22 at 13:18

2

ng g c moduleFolderName/componentName --module=moduleName

create a header component in shared module then

ng g c shared/header --module=shared

answered Mar 06 '22 at 13:18

Habeeb

322
1
8

score 1 · Answer 19 · answered Aug 14 '17 at 19:26

Add a component to the Angular 4 app using Angular CLI

To add a new Angular 4 component to the app, use command ng g component componentName. After execution of this command, Angular CLI adds a folder component-name under src\app. Also, the references of the same is added to src\app\app.module.ts file automatically.

A component shall have a @Component decorator function followed by a class which needs to be exported. The @Component decorator function accepts meta data.

Add a component to specific folder of the Angular 4 app using Angular CLI

To add a new component to a specific folder use the command ng g component folderName/componentName

score 1 · Answer 20 · answered Sep 09 '17 at 04:32

I am having the similar issues with multiple modules in application. A component can be created to any module so before creating a component we have to specify the name of the particular module.

'ng generate component newCompName --module= specify name of module'

Hasan Fathi · Answer 21 · 2018-01-29T17:32:20.490

1

Use this simple command:

ng g c users/userlist

users: Your module name.

userlist: Your component name.

edited Jan 29 '18 at 17:32

answered Jan 29 '18 at 13:24

Hasan Fathi

5,610
4
42
60

score 1 · Answer 22 · answered Apr 24 '18 at 11:20

If you have multiple apps declared in .angular-cli.json ( e.g. in case working on feature module)

"apps": [{
    "name": "app-name",
    "root": "lib",
    "appRoot": ""
}, {...} ]

You can :

ng g c my-comp -a app-name

-a stands for --app (name)

score 1 · Answer 23 · answered Aug 30 '18 at 11:12

According to Angular docs the way to create a component for specific module is,

ng g component <directory name>/<component name>

"directory name" = where the CLI generated the feature module

Example :-

ng generate component customer-dashboard/CustomerDashboard

This generates a folder for the new component within the customer-dashboard folder and updates the feature module with the CustomerDashboardComponent

score 1 · Answer 24 · answered Dec 26 '18 at 12:58

1

First run ng g module newModule . Then run ng g component newModule/newModule --flat

answered Dec 26 '18 at 12:58

Tuan van Duong

185
4
14

score 1 · Answer 25 · edited Jun 20 '20 at 09:12

1

I created component based child module with specific Root Folder

That cli command below i specified,please check out

ng g c Repair/RepairHome -m Repair/repair.module

Repair is Root Folder of our child module

-m is --module

c for compount

g for generate

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 11 '19 at 10:11

sathish

300
3
14

score 1 · Answer 26 · answered Apr 07 '20 at 17:42

I ran into this issue today while scaffolding an Angular 9 application. I got the "module does not exist error" whenever I added the .module.ts or .module to the module name. The cli only needs the name of the module with no extension. Assuming I had a module name: brands.module.ts, the command I used was

ng g c path/to/my/components/brands-component -m brands --dry-run

remove the --dry-run once you've confirmed the file structure is correct.

score 1 · Answer 27 · answered Jun 03 '20 at 16:35

Make a module, service and component in particular module

Basic:

    ng g module chat     
    ng g service chat/chat -m chat
    ng g component chat/chat-dialog -m chat

    In chat.module.ts:
        exports: [ChatDialogComponent],
        providers: [ChatService]

    In app.module.ts:

        imports: [
            BrowserModule,
            ChatModule
        ]

    Now in app.component.html:
        <chat-dialog></chat-dialog>


LAZY LOADING:
    ng g module pages --module app.module --route pages

        CREATE src/app/pages/pages-routing.module.ts (340 bytes)
        CREATE src/app/pages/pages.module.ts (342 bytes)
        CREATE src/app/pages/pages.component.css (0 bytes)
        CREATE src/app/pages/pages.component.html (20 bytes)
        CREATE src/app/pages/pages.component.spec.ts (621 bytes)
        CREATE src/app/pages/pages.component.ts (271 bytes)
        UPDATE src/app/app-routing.module.ts (8611 bytes)       

    ng g module pages/forms --module pages/pages.module --route forms

        CREATE src/app/forms/forms-routing.module.ts (340 bytes)
        CREATE src/app/forms/forms.module.ts (342 bytes)
        CREATE src/app/forms/forms.component.css (0 bytes)
        CREATE src/app/forms/forms.component.html (20 bytes)
        CREATE src/app/forms/forms.component.spec.ts (621 bytes)
        CREATE src/app/forms/forms.component.ts (271 bytes)
        UPDATE src/app/pages/pages-routing.module.ts (437 bytes)

score 1 · Answer 28 · edited Aug 25 '21 at 00:46

1

Firstly, you have to create a new module using the following command:

ng g module newModule

Then, you have to go inside that directory using the following command:

cd command  
cd newModule

And, now you can go ahead using the following command:

ng g component newComponent

and this component will be created in that module.

edited Aug 25 '21 at 00:46

karel

5,489
46
45
50

answered Aug 23 '21 at 11:04

Rohan Gupta

11
2

score 1 · Answer 29 · answered Oct 21 '21 at 13:11

1

If you already created your component without point to a module you can easily add it directly to your app module by adding it to declarations

@NgModule({
    declarations: [

    FileManagerDetailsComponent <---this is ur page component

answered Oct 21 '21 at 13:11

Tee's Touch

45
5

score 1 · Answer 30 · answered Nov 09 '22 at 14:10

This should work:

ng g c shared/components/info-card --module=/src/app/shared/shared.module.ts

Notes:

ng g c is equivalent to ng generate component
shared/components/info-card is inside my project's src/app directory & this is how I would use it to create a component with the name InfoCardComponent inside the shared/components directory (without specifying src/app).
BUT, to add this newly created component to a specific module, you
need to include /src/app in the path to the module because otherwise it would say that the module doesn't exist.

score 1 · Answer 31 · answered Dec 07 '22 at 20:13

1

Angular 13+ cli

I have multiple modules under modules folder

ng g c components/shared/newlayout -m modules/Shared

answered Dec 07 '22 at 20:13

MJ X

8,506
12
74
99

Shashank Rawat · Answer 32 · 2019-04-25T10:12:56.567

0

I use this particular command for generating components inside a module.

ng g c <module-directory-name>/<component-name>

This command will generate component local to the module. or You can change directory first by typing.

cd <module-directory-name>

and then create component.

ng g c <component-name>

Note: code enclosed in <> represent user specific names.

edited Apr 25 '19 at 10:12

answered Jan 29 '19 at 04:48

Shashank Rawat

1,371
13
15

score 0 · Answer 33 · answered Dec 09 '20 at 07:55

0

You can generate a Module using ng generate module <module name>.
Then use this command to generate a component related to that module, ng generate component <component name> --module=<module name>

answered Dec 09 '20 at 07:55

pwshehan

13
6

score 0 · Answer 34 · answered Nov 09 '21 at 08:38

0

If you need to create component and module at the same time you can use command

ng g m components/my-control && ng g c $_

This will create a module and component in the same directory and component will be added to the closes module by default

answered Nov 09 '21 at 08:38

Tomas

471
7
10

Create component & add it to a specific module with Angular-CLI

34 Answers34

Example

Make a module, service and component in particular module

Linked