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

Issue

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?

Solution

To create a component as part of a module you should

  1. ng g module newModule to generate a module,
  2. cd newModule to change directory into the newModule folder
  3. 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.

  1. ng g module NewModule to generate a module.
  2. 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.

Answered By – Alexander Ciesielski

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.