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

User · Answer

cd to your project and run    gt  ng generate component  componentname  ex  ng generate component shopping-cart   OR   gt  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   gt  ng g c shopping-cart --skipTests true   If you want to create component in any specific folder under  app    gt  ng g c ecommerce shopping-cart    you will get folder structure  app ecommerce shopping-cart

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

There are mainly two ways to generate new component in Angular      using ng g c  lt component name gt    another way is that using ng generate component  lt component name gt   using one  of these commands new component can be generated

User · Answer

ng g component component name   before you type this commend check you will be in your project directive path

User · Answer

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 gt     is my Angular application Project Directory and the    User    is the name of component  The commonds looks like - D  Angular my-app gt 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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

ng g c componentname   It will create the following 4 files    componentname css componentname html componentname spec ts componentname ts

User · Answer

Go to Project location in Specified Folder  C  Angular6 sample gt    Here you can type the command   C  Angular6 sample gt 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

User · Answer

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

User · Answer

ng generate component componentName    It will automatically import the component in module ts

User · Answer

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 gt  ng generate component test   Only then it will generate your component

User · Answer

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

User · Answer

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

User · Answer

ng g c COMPONENTNAME   this command use  for generating component using terminal this i use in angular2      g for generate c for component

User · Answer

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

User · Answer

Make sure you are in your project directory in the CMD line     ng g component componentName

User · Answer

go to your project directory in CMD  and run the following commands  You can use the visual studio code terminal also  ng generate component  quot component name quot  OR ng g c  quot component name quot  a new folder with  quot component name quot  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  quot component name quot  --nospec

User · Answer

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

[angular-cli] How to create a new component in Angular 4 using CLI

Examples related to angular-cli