How to create a new component in Angular 4 using CLI
Angular CliAngular Cli Problem Overview
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.
Angular Cli Solutions
Solution 1 - Angular Cli
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 - Angular Cli
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 - Angular Cli
-
first go to your Project Directory
-
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 - Angular Cli
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 - Angular Cli
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
Solution 6 - Angular Cli
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
Solution 7 - Angular Cli
Make sure you are in your project directory in the CMD line
ng g component componentName
Solution 8 - Angular Cli
ng g c componentname
It will create the following 4 files:
componentname.css
componentname.html
componentname.spec.ts
componentname.ts
Solution 9 - Angular Cli
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
Solution 10 - Angular Cli
ng g c COMPONENTNAME
this command use for generating component using terminal this i use in angular2.
> g for generate c for component
Solution 11 - Angular Cli
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
Solution 12 - Angular Cli
ng g component component name
before you type this commend check you will be in your project directive path
Solution 13 - Angular Cli
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.
Solution 14 - Angular Cli
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.
Solution 15 - Angular Cli
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
Solution 16 - Angular Cli
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
Solution 17 - Angular Cli
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.
Solution 18 - Angular Cli
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
Solution 19 - Angular Cli
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
Solution 20 - Angular Cli
Step1:
Get into Project Directory!(cd into created app).
Step2:
Type in the following command and run!
- Add the name of component you want to generate in the [componentname] section.
OR
- 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
Solution 21 - Angular Cli
ng generate component componentName.
It will automatically import the component in module.ts
Solution 22 - Angular Cli
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.
Solution 23 - Angular Cli
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")
Solution 24 - Angular Cli
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.
Solution 25 - Angular Cli
if you want that component not appears in one folder.
ng g c NameComponent --flat