ng generate component in subdirectory

Question

I have the following directory structure

I would like to create a new page, let's say, an About page. I want to put it in src/app/page/about/*

So I try:

ng generate component pages/about

but I get this error:

Error: More than one module matches. Use skip-import option to skip importing the component into the closest module.
More than one module matches. Use skip-import option to skip importing the component into the closest module.

Is it a good idea to use pages to store my separate pages? How can I generate components in a subdirectory using the angular-cli?

Obviously, I can manually move them after generating them, but it would be nice to be able to skip that manual step — Alexander Mills, Jan 04 '18 at 20:12

score 77 · Accepted Answer · answered Jan 05 '18 at 02:26

77

Because there are 2 modules (app.module.ts, shared.module.ts) found the CLI does not know which module to declare your component in. To get around this you have to tell the CLI which module you wish to declare your component in with the module option

ng generate component pages/about --module=app.module
// or
ng generate component pages/about --module=shared.module

answered Jan 05 '18 at 02:26

Brocco

62,737
12
70
76

6

You don't need to include the `.module` after the module name. – Tony Brasunas Jul 27 '20 at 23:26

score 9 · Answer 2 · answered Dec 19 '18 at 18:20

To create a component as part of any new module you could also do :

cd newModule to change directory into the newModule folder

ng g c newComponent to create a component as a child of the module.

This worked out for me. I was getting same error as you received.

Tony Brasunas · Answer 3 · 2022-04-05T21:12:02.433

Specify Your Module

You have two modules and haven't specified which one you want to add the new component to.

If you want to add it to your app module, you can use simply:

ng generate component pages/about --module=app

And likewise to add it to your shared module, you can use:

ng generate component pages/about --module=shared

With shorthand, these commands can be shortened to:

ng g c pages/about --module=app
ng g c pages/about --module=shared

Your file structure looks off too. I would recommend moving all of the files in the pages directory up one step to the app directory.

score 2 · Answer 4 · edited Feb 08 '21 at 15:38

2

In general, there is need to generate component in a particular path or not more than one parent module like the above case.

$> ng g component path/component-name  
  <enter>

No need of src/app/path/component-name ->path, if it is an Angular app. If you mention src/app, then this error occurs.

"Error: More than one module matches. Use skip-import "

edited Feb 08 '21 at 15:38

Anshuman Kumar

464
1
6
20

answered Jan 22 '18 at 06:56

gnganapath

917
12
16

ng generate component in subdirectory

4 Answers4

Linked