How to create a new component in Angular 4 using CLI

Question

In angular 2 I use

ng g c componentname

But It is not supported in Angular 4, so I created it manually, but it shows error that it is not a module.

`ng generate component componentname`, [according to the documentation](https://github.com/angular/angular-cli#usage) — , May 24 '17 at 07:16
you need to import the manually created component in module.ts file — surbhiGoel, Jul 07 '17 at 07:41
In Angular 7 also it works . `ng g c ` OR `ng generate component ` — Chinmoy, Apr 18 '19 at 05:50
you can add component based on it's schematics and options [according to documentation](https://angular.io/cli/generate) — Savaj Patel, Mar 12 '20 at 09:24

score 166 · Accepted Answer · edited Oct 14 '19 at 07:47

166

In Angular4 this will work the same. If you get an error I think your problem is somewhere else.

In command prompt type

ng generate component YOURCOMPONENTNAME

There are even shorthands for this: the commands generate can be used as g and component as c:

ng g c YOURCOMPONENTNAME

you can use ng --help, ng g --help or ng g c --help for the docs.

Ofcourse rename YOURCOMPONENTNAME to the name you would like to use.

Docs: angular-cli will add reference to components, directives and pipes automatically in the app.module.ts.

Update: This still functions in Angular version 8.

edited Oct 14 '19 at 07:47

Sir Muffington

309
1
8
14

answered May 24 '17 at 07:20

Mike Bovenlander

5,236
5
28
47

1

I am getting this error-----------installing component Error locating module for declaration SilentError: No module files found – surbhiGoel May 26 '17 at 12:02
1

I am wondering, is there any command available to remove created component including it's reference app module? – panky sharma Oct 11 '18 at 15:31
2

@pankysharma No there is no command in Angular CLI to remove a component, but if you want to recreate the component with different options; you can use the `--force` (shorthand: -f) option to override files. – Mike Bovenlander Oct 12 '18 at 09:06
"ng g c employees" worked for me. I was using a '$' before 'ng' like '$ng g c employees' which was creating issue in this case. – Raj Chaurasia Nov 13 '18 at 19:39
If you don't need the test file(.spec.ts) for your new component, add argument --skipTests to your command. – Chirag K Dec 24 '19 at 10:05

score 39 · Answer 2 · edited Feb 26 '21 at 07:10

Generating and serving an Angular project via a development server -

First go to your Project Directory and the type the below -

ng new my-app
cd my-app
ng generate component User (or) ng g c user 
ng serve

Here “D:\Angular\my-app>” is my Angular application Project Directory and the “User” is the name of component.

The commonds looks like -

D:\Angular\my-app>ng g component User
  create src/app/user/user.component.html (23 bytes)
  create src/app/user/user.component.spec.ts (614 bytes)
  create src/app/user/user.component.ts (261 bytes)
  create src/app/user/user.component.css (0 bytes)
  update src/app/app.module.ts (586 bytes)

Apurv Chaudhary · Answer 3 · 2018-04-03T05:48:17.413

1) first go to your Project Directory

2) then Run below Command in terminal.

ng generate component componentname

OR

ng g component componentname

3) after that you will see output like this,

create src/app/test/componentname.component.css (0 bytes)
create src/app/test/componentname.component.html (23 bytes)
create src/app/test/componentname.component.spec.ts (614 bytes)
create src/app/test/componentname.component.ts (261 bytes)
update src/app/app.module.ts (1087 bytes)

score 15 · Answer 4 · answered May 24 '17 at 07:15

ng g component componentname

It generates the component and adds the component to module declarations.

when creating component manually , you should add the component in declaration of the module like this :

@NgModule({
  imports: [
    yourCommaSeparatedModules
    ],
  declarations: [
    yourCommaSeparatedComponents
  ]
})
export class yourModule { }

score 14 · Answer 5 · answered Dec 30 '18 at 15:52

14

If you want to create new component without .spec file, you can use

ng g c component-name --spec false

You can find these options using ng g c --help

answered Dec 30 '18 at 15:52

Mile Mijatović

2,948
2
22
41

score 12 · Answer 6 · edited Mar 29 '20 at 16:47

12

For creating component under certain folder

ng g c employee/create-employee --skipTests=false --flat=true

This line will create a folder name 'employee', underneath that it creates a 'create-employee' component.

without creating any folder

ng g c create-employee --skipTests=false --flat=true

edited Mar 29 '20 at 16:47

SurenSaluka

1,534
3
18
36

answered Jun 12 '19 at 23:42

Alexander Zaldostanov

2,907
4
30
39

santhosh · Answer 7 · 2020-09-03T11:25:24.827

10

Make sure you are in your project directory in the CMD line

    ng g component componentName

edited Sep 03 '20 at 11:25

answered Jan 03 '19 at 13:13

santhosh

121
1
6

score 4 · Answer 8 · edited Nov 20 '18 at 02:28

4

ng g c componentname

It will create the following 4 files:

componentname.css
componentname.html
componentname.spec.ts
componentname.ts

edited Nov 20 '18 at 02:28

Maarten Bodewes

90,524
13
150
263

answered Jun 06 '18 at 12:26

Kamlesh Kumawat

51
4

score 3 · Answer 9 · answered Jul 28 '17 at 11:11

3

ng generate component component_name was not working in my case because instead of using 'app' as project folder name, I renamed it to something else. I again changed it to app. Now, it is working fine

answered Jul 28 '17 at 11:11

surbhiGoel

1,436
2
8
12

rajeev omar · Answer 10 · 2017-11-10T03:24:30.243

3

ng g c COMPONENTNAME

this command use for generating component using terminal this i use in angular2.

g for generate c for component

edited Nov 10 '17 at 03:24

answered Nov 09 '17 at 10:58

rajeev omar

166
1
7

score 2 · Answer 11 · answered Jun 19 '17 at 19:23

2

In my case i happen to have another .angular-cli.json file in my src folder. Removing it solved the problem. Hope it helps

angular 4.1.1 angular-cli 1.0.1

answered Jun 19 '17 at 19:23

phacic

1,402
1
14
21

score 2 · Answer 12 · edited Oct 26 '17 at 05:49

2

ng g component component name

before you type this commend check you will be in your project directive path

edited Oct 26 '17 at 05:49

Andreas

5,393
9
44
53

answered Oct 26 '17 at 05:31

santhosh

121
1
6

score 2 · Answer 13 · answered Dec 16 '17 at 03:37

2

ng g c --dry-run so you can see what you are about to do before you actually do it will save some frustration. Just shows you what it is going to do without actually doing it.

answered Dec 16 '17 at 03:37

Aggie Jon of 87

99
1
6

score 2 · Answer 14 · edited Mar 09 '18 at 17:55

2

You should be in the src/app folder of your angular-cli project on command line. For example:

D:\angular2-cli\first-app\src\app> ng generate component test

Only then it will generate your component.

edited Mar 09 '18 at 17:55

Tim

4,790
4
33
41

answered Mar 09 '18 at 10:12

Amruta Thakur

21
1

score 2 · Answer 15 · edited Aug 03 '20 at 14:07

go to your project directory in CMD, and run the following commands. You can use the visual studio code terminal also.

ng generate component "component_name"

OR

ng g c "component_name"

a new folder with "component_name" will be created

component_name/component_name.component.html component_name/component_name.component.spec.ts component_name/component_name.component.ts component_name/component_name.component.css

new component will be Automatically added module.

you can avoid creating spec file by following command

ng g c "component_name" --nospec

score 1 · Answer 16 · answered May 26 '17 at 13:45

Did you update the angular-cli to latest version? or did you try updating node or npm or typescript? this issue comes because of versions like angular/typescript/node. If you are updating the cli, use this link here. https://github.com/angular/angular-cli/wiki/stories-1.0-update

score 1 · Answer 17 · edited Apr 30 '18 at 18:49

1

ng g c COMPONENTNAME should work, if your are getting module not found exception then try these things-

Check your project directory.
If you are using visual studio code then reload it or reopen your project in it.

edited Apr 30 '18 at 18:49

Adrita Sharma

21,581
10
69
79

answered Jan 16 '18 at 12:12

Kamal Singh Meena

11
1

score 1 · Answer 18 · answered Feb 23 '18 at 06:08

go to your angular project folder and open the command promt an type "ng g component header" where header is the new component that you want to create.As default the header component will be created inside the app component.You can create components inside a component .For example if you want to create a component inside he header that we made above then type"ng g component header/menu". This will create a menu component inside the header component

score 1 · Answer 19 · answered Sep 20 '18 at 05:46

Go to Project location in Specified Folder

C:\Angular6\sample>

Here you can type the command

C:\Angular6\sample>ng g c users

Here g means generate , c means component ,users is the component name

it will generate the 4 files

users.component.html,
users.component.spec.ts,
users.component.ts,
users.component.css

score 1 · Answer 20 · answered Oct 24 '18 at 11:58

Step1:

Get into Project Directory!(cd into created app).

Step2:

Type in the following command and run!

ng generate component [componentname]

Add the name of component you want to generate in the [componentname] section.

OR

ng generate c [componentname]

Add name of component you want to generate in the [componentname] section.

Both will work

For reference checkout this section of Angular Documentation!

https://angular.io/tutorial/toh-pt1

For reference also checkout the link to Angular Cli on github!

https://github.com/angular/angular-cli/wiki/generate-component

score 1 · Answer 21 · edited Oct 03 '19 at 08:16

1

ng generate component componentName.

It will automatically import the component in module.ts

edited Oct 03 '19 at 08:16

Nuwan Alawatta

1,812
21
29

answered Mar 04 '19 at 03:19

José Eras

90
4

score 1 · Answer 22 · answered Mar 06 '19 at 15:53

1

There are mainly two ways to generate new component in Angular, using ng g c <component_name> , another way is that using ng generate component <component_name>. using one of these commands new component can be generated.

answered Mar 06 '19 at 15:53

Gayan Sampath

163
2
5

score 1 · Answer 23 · answered Jun 13 '20 at 16:33

cd to your project and run,

> ng generate component "componentname"
ex: ng generate component shopping-cart

OR

> ng g c shopping-cart

(This will create new folder under "app" folder with name "shopping-cart" and create .html,.ts, .css. specs files.)

If you do not want to generate .spec file

> ng g c shopping-cart --skipTests true

If you want to create component in any specific folder under "app"

> ng g c ecommerce/shopping-cart

(you will get folder structure "app/ecommerce/shopping-cart")

score 1 · Answer 24 · answered Oct 09 '22 at 16:31

1

Go to your project directory in CMD, run the following code.

ng g c componentname

A folder will be created in the component name. inside that, you can find four files such as HTML, CSS, spec.ts & ts.

And you should not rename any of the files.

answered Oct 09 '22 at 16:31

Hasan

9
2

score 0 · Answer 25 · answered Sep 15 '21 at 16:53

0

I think you have to upgrade the latest angular cli using this command.

npm install -g @angular/cli

Then if you run ng g c componentName, it will work.

answered Sep 15 '21 at 16:53

AlexSakai06

140
5
11

score 0 · Answer 26 · answered Nov 11 '21 at 21:51

0

if you want that component not appears in one folder.

ng g c NameComponent --flat

answered Nov 11 '21 at 21:51

davidrichardo

81
1
1

How to create a new component in Angular 4 using CLI

26 Answers26

Linked