Create component to 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

User · Answer

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.

User · Answer

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

User · Answer

You can try below command  which describes the   ng - gt  Angular  g  - gt  Generate c  - gt  Component -m - gt  Module    Then your command will be like   ng g c user userComponent -m user module

User · Answer

According to Angular docs the way to create a component for specific module is   ng g component  lt directory name gt   lt component name gt     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

User · Answer

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

User · Answer

You can generate a Module using ng generate module  lt module name gt   Then use this command to generate a component related to that module  ng generate component  lt component name gt  --module  lt module name gt

User · Answer

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           lt chat-dialog gt  lt  chat-dialog gt    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

User · Answer

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

User · Answer

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

User · Answer

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       gt  import    my-feature my-feature module   then m   gt  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

User · Answer

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

User · Answer

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

User · Answer

if you want to create along with your module try this   ng generate m module name --routing  amp  amp   ng generate c component name

User · Answer

Use this simple command   ng g c users userlist   users  Your module name   userlist  Your component name

User · Answer

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

User · Answer

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 NewMoudle 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

User · Answer

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

User · Answer

ng g component nameComponent --module app module ts

User · Answer

For Angular v4 and Above  simply use   ng g c componentName -m ModuleName

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

this is what worked for me    1 -- gt   ng g module new-module  2 -- gt   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

User · Answer

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

User · Answer

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

[angular] Create component to specific module with Angular-CLI

Examples related to angular

Examples related to typescript

Examples related to angular-cli