CLI for Angular applications based on the ember-cli project.
This Fork is the exact same as ng-cli except the following:
- DLL
- Webpack Bundle Analysis
The CLI is now in Release Candidate (RC). If you are updating from a beta version, check out our [RC.0 Update Guide] (https://github.com/angular/angular-cli/wiki/stories-rc.0-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 port and the one used by the LiveReload server with two command-line options :
ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
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 |
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 on Windows
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