Create component to specific module with Angular-CLI

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?

Answers


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.

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

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


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

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

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.


For Angular v4 and Above, simply use:

ng g c componentName -m ModuleName

  1. First, you generate a module by executing.
ng g m modules/media

this will generate a module called media inside modules folder.

  1. 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.


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'

Use this simple command:

ng g c users/userlist

users: Your module name.

userlist: Your component name.


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


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


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


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)


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


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.


Go to module 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.ts

Need Your Help

Show SOME invisible/whitespace characters in Eclipse

eclipse tabs spaces bbedit

A long while back I transitioned to doing all my web application development in Eclipse from BBEdit. But I miss one little feature from BBEdit. I used to be able to show invisible characters like t...

What is the solution for the N+1 issue in JPA and Hibernate?

java hibernate jpa design-patterns orm

I understand that the N+1 problem is where one query is executed to fetch N records and N queries to fetch some relational records.