CODEWITHSUNDEEP
angulartypescriptangular-cli
Elmer Dantas
Elmer Dantas

Reputation: 4869

Create component & add it to a 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?

Upvotes: 279

Views: 504181

Answers (30)

user1883467
user1883467

Reputation: 61

In Angular 18, this works for me:

ng g m mymod

ng g c mymod/mycomp --standalone=false --module=mymod

Upvotes: 0

Samwise Ganges
Samwise Ganges

Reputation: 552

Here is the way to generate a component inside a module as of Angular 17 and 18:

If you want the new component to be inside the module directory do this:

ng g c my-module/MyComponent --standalone false

Otherwise, if you just want the component stored at app level, do this:

ng g c MyComponent --module my-module --standalone false

That's it. It will create the new component and it will add the new component imports and declarations to the module.ts file. The important thing is that must specify standalone false or it will make your component standalone as that is the default I believe since v17.

Doing ng g c my-module-name/MyComponentName without --standalone false will not work. That will just create the component inside the module directory, but it will still be standalone, and won't be added to the imports or declarations of the module.ts file.

You don't need to write the full module file name like my-module-name.module.ts. You don't need an = after --module (but you can if you want).

Upvotes: 0

danilo
danilo

Reputation: 9405

For Angular 17 and 18:

Create the module first.
You need to specify that isn't a standalone component and specify the module:

ng g m product-listing
ng g c product-listing --standalone false -m product-listing

The module will look like this:

@NgModule({
  declarations: [
    ProductListingComponent
  ],
  imports: [
    CommonModule
  ]
})
export class ProductListingModule { }

Upvotes: 1

Thomas
Thomas

Reputation: 667

If you need to create component and module at the same time you can use command

ng g m components/my-control && ng g c $_

This will create a module and component in the same directory and component will be added to the closes module by default.

The $_ means the last argument passed to previous command and in this case its the name used for component and module

Upvotes: 4

Dacosta
Dacosta

Reputation: 2803

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

In Angular 14:

ng g component nameComponent --module=app --dry-run

Upvotes: 265

MJ X
MJ X

Reputation: 9054

Angular 13+ cli

I have multiple modules under modules folder

ng g c components/shared/newlayout -m modules/Shared

Upvotes: 2

Junaid
Junaid

Reputation: 4926

This should work:

  • ng g c shared/components/info-card --module=/src/app/shared/shared.module.ts

Notes:

  1. ng g c is equivalent to ng generate component
  2. shared/components/info-card is inside my project's src/app directory & this is how I would use it to create a component with the name InfoCardComponent inside the shared/components directory (without specifying src/app).
  3. BUT, to add this newly created component to a specific module, you
    need to include /src/app in the path to the module because otherwise it would say that the module doesn't exist.

Upvotes: 2

Alexander Ciesielski
Alexander Ciesielski

Reputation: 10834

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.

Upvotes: 367

Habeeb
Habeeb

Reputation: 352

ng g c moduleFolderName/componentName --module=moduleName

create a header component in shared module then

ng g c shared/header --module=shared

Upvotes: 3

Tee's Touch
Tee's Touch

Reputation: 55

If you already created your component without point to a module you can easily add it directly to your app module by adding it to declarations

@NgModule({
    declarations: [

    FileManagerDetailsComponent <---this is ur page component

Upvotes: 2

Rohan Gupta
Rohan Gupta

Reputation: 21

Firstly, you have to create a new module using the following command:

ng g module newModule

Then, you have to go inside that directory using the following command:

cd command  
cd newModule

And, now you can go ahead using the following command:

ng g component newComponent

and this component will be created in that module.

Upvotes: 2

Praveen G
Praveen G

Reputation: 167

I have used the following command in the angular CLI version 8.3, and it worked by generating a specific component declared in a specific module.

  1. move to the specific folder were we need the component to be generated

    cd <component-path>

  2. Call the below generate command

    ng g c <component-name> --module=<module-name>

Example

 `ng g c login --module= app`

Upvotes: 7

Zabi Babar
Zabi Babar

Reputation: 384

I don't know if this is what brought you guys here, but I wanted to create a folder with a module, routing and component files. I wanted the component to be declared to the module I created.

For this I found this command to be really helpful.

ng g m path/to/folder/component --routing && ng g c path/to/folder/component

This should create a folder with 6 files.

CREATE path/to/folder/component/component-routing.module.ts (253 bytes)
CREATE path/to/folder/component/component.module.ts (297 bytes)
CREATE path/to/folder/component/component.component.html (26 bytes)
CREATE path/to/folder/component/component.component.spec.ts (655 bytes)
CREATE path/to/folder/component/component.component.ts (295 bytes)
CREATE path/to/folder/component/component.component.scss (0 bytes)
UPDATE path/to/folder/component/component.module.ts (379 bytes)

You can remove --routing if you don't want routing.

Upvotes: 4

Junaid
Junaid

Reputation: 4926

TL;DR
Try this. Specify the module name by module's file name(excluding the .ts extension)

ng g c components/path-to-a-folder/component-name --module=app.module

Notes:

  • ng g c is short for ng generate component
  • If you want the component to be added in a different module, let's say in file collection.module.ts then use --module=collection.module instead of --module=app.module & you should be good to go.

Upvotes: 6

pwshehan
pwshehan

Reputation: 23

  1. You can generate a Module using ng generate module <module name>.
  2. Then use this command to generate a component related to that module, ng generate component <component name> --module=<module name>

Upvotes: 1

Vixson
Vixson

Reputation: 739

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

Upvotes: 4

Carlos Luis Rivero
Carlos Luis Rivero

Reputation: 177

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:
        <chat-dialog></chat-dialog>


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)

Upvotes: 2

Jared Whipple
Jared Whipple

Reputation: 1171

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: () => import('./my-feature/my-feature.module').then(m => 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

Upvotes: 7

Ivailo Dimitrov
Ivailo Dimitrov

Reputation: 81

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

Upvotes: 8

isaax2
isaax2

Reputation: 29

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

Upvotes: 3

Varun Jain
Varun Jain

Reputation: 119

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

Upvotes: 10

doubleya
doubleya

Reputation: 539

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.

Upvotes: 2

Sandeep Patel
Sandeep Patel

Reputation: 2507

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

Upvotes: 4

Shashank Rawat
Shashank Rawat

Reputation: 1581

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.

Upvotes: 1

Elhakim
Elhakim

Reputation: 414

  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.

working tree

enter image description here

Upvotes: 10

sathish
sathish

Reputation: 359

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

Upvotes: 2

Tuan van Duong
Tuan van Duong

Reputation: 205

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

Upvotes: 2

user2662006
user2662006

Reputation: 2294

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

Upvotes: 18

Sksaif Uddin
Sksaif Uddin

Reputation: 692

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

Upvotes: 2

Sam
Sam

Reputation: 21

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)

Upvotes: 2

Related Questions