Prototype of a CLI for Angular applications based on the ember-cli project.
This project is very much still a work in progress.
The CLI is now in beta. If you wish to collaborate while the project is still young, check out our issue list.
Before submitting new issues, have a look at issues marked with the
type: faq label.
We changed the build system between beta.10 and beta.14, from SystemJS to Webpack. And with it comes a lot of benefits. To take advantage of these, your app built with the old beta will need to migrate.
You can update your
beta.10 projects to
beta.14 by following these instructions.
Both the CLI and generated project have dependencies that require Node 6.9.0 or higher, together with NPM 3 or higher.
Table of Contents
- Generating a New Project
- Generating Components, Directives, Pipes and Services
- Updating Angular CLI
- Development Hints for hacking on Angular CLI
BEFORE YOU INSTALL: please read the prerequisites
npm install -g @angular/cli
Generating and serving an Angular project via a development server
ng new PROJECT_NAMEcd PROJECT_NAMEng serve
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
Generating Components, Directives, Pipes and Services
You can use the
ng generate (or just
ng g) command to generate Angular components:
ng generate component my-new-componentng g component my-new-component # using the alias# components support relative path generation# if in the directory src/app/feature/ and you runng g component new-cmp# your component will be generated in src/app/feature/new-cmp# but if you were to runng g component ../newer-cmp# your component will be generated in src/app/newer-cmp
You can find all possible blueprints in the table below:
Updating Angular CLI
To update Angular CLI to a new version, you must update both the global package and your project's local package.
npm uninstall -g angular-cli @angular/clinpm cache cleannpm install -g @angular/cli@latest
Local project package:
rm -rf node_modules dist # use rmdir on Windowsnpm install --save-dev @angular/cli@latestnpm installng update
ng update will check for changes in all the auto-generated files created by
ng new and allow you to update yours. You are offered four choices for each changed file:
n (don't overwrite),
d (show diff between your file and the updated file) and
Carefully read the diffs for each code file, and either accept the changes or incorporate them manually after
ng update finishes.
The main cause of errors after an update is failing to incorporate these updates into your code.
You can find more details about changes between versions in CHANGELOG.md.
Development Hints for hacking on Angular CLI
Working with master
git clone https://github.com/angular/angular-cli.gitcd angular-clinpm 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
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 foocd foonpm link @angular/cling serve
npm link @angular/cli is needed because by default the globally installed
@angular/cli just loads
@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 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