CLI for Angular applications based on the ember-cli project.
The CLI is now in Release Candidate (RC). If you are updating from a beta version, check out our [RC Update Guide] (https://github.com/angular/angular-cli/wiki/stories-rc-update).
If you wish to collaborate, check out our issue list.
Before submitting new issues, have a look at issues marked with the type: faq
label.
Both the CLI and generated project have dependencies that require Node 6.9.0 or higher, together with NPM 3 or higher.
- Installation
- Usage
- Generating a New Project
- Generating Components, Directives, Pipes and Services
- Updating Angular CLI
- Development Hints for hacking on Angular CLI
- Documentation
- License
BEFORE YOU INSTALL: please read the prerequisites
npm install -g @angular/cli
ng help
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
You can configure the default HTTP host and port used by the development server with two command-line options :
ng serve --host 0.0.0.0 --port 4201
You can use the ng generate
(or just ng g
) command to generate Angular components:
ng generate component my-new-component
ng g component my-new-component # using the alias
# components support relative path generation
# if in the directory src/app/feature/ and you 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
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 |
If you're using Angular CLI beta.28
or less, you need to uninstall angular-cli
package. It should be done due to changing of package's name and scope 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 and your project's local package.
Global package:
npm uninstall -g @angular/cli
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
You can find more details about changes between versions in CHANGELOG.md.
git clone https://github.com/angular/angular-cli.git
cd angular-cli
npm link
npm link
is very similar to npm install -g
except that instead of downloading the package
from the repo, the just cloned angular-cli/
folder becomes the global package.
Any changes to the files in the angular-cli/
folder will immediately affect the global @angular/cli
package,
allowing you to quickly test any changes you make to the cli project.
Now you can use @angular/cli
via the command line:
ng new foo
cd foo
npm link @angular/cli
ng serve
npm link @angular/cli
is needed because by default the globally installed @angular/cli
just loads
the local @angular/cli
from the project which was fetched remotely from npm.
npm link @angular/cli
symlinks the global @angular/cli
package to the local @angular/cli
package.
Now the angular-cli
you cloned before is in three places:
The folder you cloned it into, npm's folder where it stores global packages and the 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.
The documentation for the Angular CLI is located in this repo's wiki.
MIT