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.

Solution 1

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)

Solution 2

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.

Solution 3

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)

Solution 4

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 { }

Solution 5

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

View more solutions

Comments

[Admin]

ng generate component componentname, according to the documentation

[surbhiGoel]

you need to import the manually created component in module.ts file

[Chinmoy]

In Angular 7 also it works . ng g c <componentname> OR ng generate component <Name>

[Savaj Patel]

you can add component based on it's schematics and options according to documentation

[surbhiGoel]

I am getting this error-----------installing component Error locating module for declaration SilentError: No module files found

[panky sharma]

I am wondering, is there any command available to remove created component including it's reference app module?

[Mike Bovenlander]

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

[Raj Chaurasia]

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

[Chirag K]

If you don't need the test file(.spec.ts) for your new component, add argument --skipTests to your command.