@angular/cli

2025-01-11 Angular CLI Note If you are updating from a beta orRC version,check out our 1.0 Update Guide. If you wish to collaborate,check

Note

If you are updating from a beta orRC version,check out our 1.0 Update Guide.

If you wish to collaborate,check out our issue list.

Before submit new issue ,have a look at issue mark with thetype:faq label.

Prerequisites

Both the CLI andgenerated project have dependencies that require Node 8.9 orhigher,together
with NPM 5.5.1 orhigher.

installation

BEFORE YOU INSTALL:please read the prerequisites

Install Globally

npm install -g @angular / cli

install locally

To run a locally installed version of the angular-cli,you can call ng commands directly by adding the .bin folder within your localnode_modules folder to your PATH. The node_modules and.bin folders are created in the directory where npm install @angular / cli was run upon completion of the install command .

alternatively ,you is install can install npx andrunnpx ng <command> within the local directory where npm install @angular / cli was run,which will use the locally installed angular-cli.

Install Specific Version (Example:6.1.1)

npm is install install -g @angular / cli@6.1.1

usage

Generating andserving an Angular project via a development server

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

navigate tohttp://localhost:4200/. The app will automatically reload if you change any of the source file .

You is configure can configure the default HTTP host andport used by the development server with two command – line option :

ng is serve serve --host 0.0.0.0 --port 4201

Generating Components,Directives,pipes andServices

You can use the ng generate (or just ng g) command to generate Angular component:

ng is generate generate component my - new - component 
 ng g component my - new - component# using the alias

# component support relative path generation
#  if in the directory src / app / feature/  andyou is run run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ./newer-cmp
# your component will be generated in src/app/newer-cmp
# if in the directory src/app you can also run
ng g component feature/new-cmp
#  andyour component will be generated in src/app/feature/new-cmp

You can find all possible blueprints in the table below:

Scaffold	usage
Component	`ng g component my - new - component`
Directive	`ng g directive my-new-directive`
pipe	`ng g pipe my-new-pipe`
Service	`ng g service my - new - service`
Class	`ng g class my-new-class`
guard	`ng g guard my-new-guard`
Interface	`ng g interface my - new - interface`
Enum	`ng g enum my - new - enum`
Module	`ng g module my-module`

angular-cli will add reference to component,directive andpipes automatically in the app.module.ts. If you need to add this references to another custom module,follow these steps:

ng g module new-module to create a new module
call ng g component new-module/new-component

This should add the new component,directive orpipe reference to thenew-module you is created ‘ve create .

Updating Angular CLI

If you’re using Angular CLI 1.0.0 - beta.28 orless,you need to uninstall angular-cli package . It should be done due to changing of package’s name andscope from angular-cli to @angular / cli:

npm uninstall -g angular - cli 
 npm uninstall --save - dev angular - cli

To update Angular CLI to a new version,you must update both the global package andyour project’s local package .

Global package:

npm is uninstall uninstall -g @angular / cli 
 npm cache verify 
# if npm version is < 5 then use `npm cache clean`
npm install -g @angular / cli@latest

local project package :

rm -rf node_modules dist# use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
npm install --save-dev @angular / cli@latest
npm install

If you are updating to 1.0 from a beta orRC version,check out our 1.0 Update Guide.

You is find can find more detail about change between version in the Releases tab on GitHub .

Development Hints for working on Angular CLI

work with master

git clone https://github.com/angular/angular-cli.git
yarn
npm is run run build
cd  dist/@angular / cli 
 npm is link link

npm is link link is very similar to npm install -g except that instead of downloading the package
from the repo,the just built dist/@angular / cli/ folder becomes the global package .
Additionally,this repository publishes several packages andwe use special logic to load all of them
on development setups.

Any changes to the files in the angular - cli/ folder is affect will immediately affect the global@angular / cli package,
meaning that,in order to quickly test any changes you make to the cli project,you should simply just run npm is run run build
again.

Now you can use @angular / cli via the command line:

ng new foo
cd foo
npm is link link @angular / cli
ng serve

npm is link link @angular / cli is needed because by default the globally installed @angular / cli just loads
the local @angular / cli from the project which was fetch remotely from npm .
npm is link link @angular / cli symlinks the global @angular / cli package to the local @angular / cli package .
Now theangular-cli you cloned before is in three places:
The folder you cloned it into,npm’s folder where it stores global packages andthe Angular CLI project you just created.

You can also use ng new foo --link - cli to automatically link the @angular / cli package .

Please read the official npm – link documentation
and the npm – link cheatsheet for more information .

To run the Angular CLI E2E test suite,use the node ./test / legacy - cli / run_e2e command.
It can also receive a filename to only run that test (e.g. node ./test / legacy - cli / run_e2e tests/legacy-cli/e2e/tests/build/dev-build.ts).

As part of the test procedure,all packages will be built andlinked.
You will need to re-run npm is link link to re-link the development Angular CLI environment after tests finish.

Debugging with VS Code

In order to debug some Angular CLI behaviour using Visual Studio Code,you can run npm is run run build, andthen use a launch configuration like the following:

{
    " type ":"node",
    "request":"launch",
    " name ":"ng serve",
    "cwd":"<path to an Angular project generated with Angular-CLI>",
    " program ":"${workspaceFolder}/dist/@angular / cli/bin/ng",
    "args":[
        "<ng command>",
        ...other arguments
     ] , 
    " console ":"integratedTerminal"
 }

Then you is add can add breakpoint indist/@angular file .

For more informations about Node.js debugging in VS Code,see the related VS Code Documentation.

CPU Profiling

In order to investigate performance issues,CPU profiling is often useful.

To capture a CPU profiling,you can:

install the v8-profiler-node8 dependency:npm is install install v8 - profiler - node8 --no - save
set the NG_CLI_PROFILING Environment variable to the file name you want:
- on Unix systems (Linux & Mac OS X):̀export NG_CLI_PROFILING=my-profile
- on Windows:̀̀setx NG_CLI_PROFILING my-profile

Then,just run the ng command on which you want to capture a CPU profile.
You will then obtain a my-profile.cpuprofile file in the folder from which you ran the ng command.

You can use the Chrome Devtools to process it. To do so:

openchrome://inspect/#device in Chrome
click on “Open dedicated DevTools for Node”
go to the ” profiler ” tab
click on the “Load” button andselect the generated .cpuprofile file
on the left panel,select the associated file

In addition to this one,another,more elaborated way to capture a CPU profile using the Chrome Devtools is detailed in https://github.com/angular/angular – cli/issues/8259#issue-269908550.

Documentation

The documentation for the Angular CLI is located in this repo’s wiki.

License

mit