51

I have the following directory structure

enter image description here

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?

Improve this question
1
  • 1
    Obviously, I can manually move them after generating them, but it would be nice to be able to skip that manual step Commented Jan 4, 2018 at 20:12

4 Answers 4

Reset to default
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
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

You don't need to include the .module after the module name.
9

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.

Improve this answer

Comments

3

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.

Improve this answer

Comments

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 "
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.