How to create a new component in Angular 4 using CLI

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:

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 2:

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