Prototype of a CLI for Angular 2 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 4 or higher, together with NPM 3 or higher.
- Installation
- Usage
- Generating a New Project
- Generating Components, Directives, Pipes and Services
- Generating a Route
- Creating a Build
- Build Targets and Environment Files
- Base tag handling in index.html
- Bundling
- Running Unit Tests
- Running End-to-End Tests
- Proxy To Backend
- Deploying the App via GitHub Pages
- Linting and formatting code
- Support for offline applications
- Commands autocompletion
- Project assets
- Global styles
- CSS preprocessor integration
- 3rd Party Library Installation
- Global Library Installation
- Updating angular-cli
- Development Hints for hacking on angular-cli
BEFORE YOU INSTALL: please read the prerequisites
npm install -g angular-cling --helpng new PROJECT_NAME
cd PROJECT_NAME
ng serveNavigate 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 49153You 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-cmpYou 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 |
Generating routes in the CLI has been disabled for the time being. A new router and new route generation blueprints are coming.
You can read the official documentation for the new Router here: https://angular.io/docs/ts/latest/guide/router.html. Please note that even though route generation is disabled, building your projects with routing is still fully supported.
ng buildThe build artifacts will be stored in the dist/ directory.
ng build can specify both a build target (--target=production or --target=development) and an
environment file to be used with that build (--environment=dev or --environment=prod).
By default, the development build target and environment are used.
The mapping used to determine which environment file is used can be found in angular-cli.json:
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}These options also apply to the serve command. If you do not pass a value for environment,
it will default to dev for development and prod for production.
# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# and so are these
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng buildYou can also add your own env files other than dev and prod by doing the following:
- create a
src/environments/environment.NAME.ts - add
{ "NAME": 'src/environments/environment.NAME.ts' }to the theapps[0].environmentsobject inangular-cli.json - use them via the
--env=NAMEflag on the build/serve commands.
When building you can modify base tag (<base href="/">) in your index.html with --base-href your-url option.
# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/
ng build --bh /myUrl/All builds make use of bundling, and using the --prod flag in ng build --prod
or ng serve --prod will also make use of uglifying and tree-shaking functionality.
ng testTests will execute after a build is executed via Karma, and it will automatically watch your files for changes. You can run tests a single time via --watch=false.
ng e2eBefore running the tests make sure you are serving the app via ng serve.
End-to-end tests are run via Protractor.
Using the proxying support in webpack's dev server we can highjack certain urls and send them to a backend server.
We do this by passing a file to --proxy-config
Say we have a server running on http://localhost:3000/api and we want all calls to http://localhost:4200/api to go to that server.
We create a file next to projects package.json called proxy.conf.json
with the content
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}You can read more about what options are available here webpack-dev-server proxy settings
and then we edit the package.json file's start script to be
"start": "ng serve --proxy-config proxy.conf.json",now run it with npm start
You can deploy your apps quickly via:
ng github-pages:deploy --message "Optional commit message"This will do the following:
- creates GitHub repo for the current project if one doesn't exist
- rebuilds the app in production mode at the current
HEAD - creates a local
gh-pagesbranch if one doesn't exist - moves your app to the
gh-pagesbranch and creates a commit - edit the base tag in index.html to support github pages
- pushes the
gh-pagesbranch to github - returns back to the original
HEAD
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.
If you are deploying a user or organization page, you can instead use the following command:
ng github-pages:deploy --user-page --message "Optional commit message"This command pushes the app to the master branch on the github repo instead
of pushing to gh-pages, since user and organization pages require this.