This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
angular-cli with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
Prototype of a CLI for Angular 2 applications based on the ember-cli project.
This project is very much still a work in progress.
We still have a long way before getting out of our alpha stage. If you wish to collaborate while the project is still young, check out our issue list.
The generated project has dependencies that require Node 4 or greater.
BEFORE YOU INSTALL: please read the prerequisites
npm install -g angular-cli
ng new PROJECT_NAME cd PROJECT_NAME ng 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 --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:
You can generate a new route by with the following command (note the singular
ng generate route hero
This will create a folder which will contain the hero component and related test and style files.
The generated route will also be registered with the parent component's
By default the route will be designated as a lazy route which means that it will be loaded into the browser when needed, not upfront as part of a bundle.
In order to visually distinguish lazy routes from other routes the folder for the route will be prefixed with a
+ per the above example the folder will be named
This is done in accordance with the style guide.
The default lazy nature of routes can be turned off via the lazy flag (
There is an optional flag for
skip-router-generation which will not add the route to the parent component's
The build artifacts will be stored in the
At build time, the
src/client/app/environment.ts will be replaced by either
config/environment.prod.ts, depending on the
current cli environment.
Environment defaults to
dev, but you can generate a production build via
-prod flag in either
ng build -prod or
ng serve -prod.
Tests will execute after a build is executed via Karma
If run with the watch argument
-w) builds will run when source files have changed
and tests will run after each successful build
Before running the tests make sure you are serving the app via
End-to-end tests are ran via Protractor.
You can deploy your apps quickly via:
ng github-pages:deploy --message "Optional commit message"
This will do the following:
gh-pagesbranch if one doesn't exist
gh-pagesbranch and creates a commit
gh-pagesbranch to github
Creating the repo requires a token from github, and the remaining functionality relies on ssh authentication for all git operations that communicate with github.com. To simplify the authentication, be sure to setup your ssh keys.
You can lint or format your app code by running
ng lint or
ng format respectively.
This will use the
format npm script that in generated projects uses
You can modify the these scripts in
package.json to run whatever tool you prefer.
The index.html file includes a commented-out code snippet for installing the angular2-service-worker. This support is experimental, please see the angular/mobile-toolkit project for documentation on how to make use of this functionality.
To turn on auto completion use the following commands:
ng completion >> ~/.bashrc source ~/.bashrc
ng completion >> ~/.zshrc source ~/.zshrc
Windows users using gitbash:
ng completion >> ~/.bash_profile source ~/.bash_profile
We support all major CSS preprocessors:
To use one just install for example
npm install node-sass and rename
.css files in your project to
.sass. They will be compiled automatically.
Angular2App's options argument has
compassCompiler options that are passed directly to their respective CSS preprocessors.
The installation of 3rd party libraries are well described at our Wiki Page
This project is currently a prototype so there are many known issues. Just to mention a few:
servecommands with Admin permissions, otherwise the performance is not good.
ng newtake too long because of lots of npm dependencies.
ng serveremember that the generated project has dependencies that require Node 4 or greater.
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
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 server
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.