UNPKG

8.81 kBMarkdownView Raw
1## Angular CLI
2
3<!-- Badges section here. -->
4[![Build Status](https://img.shields.io/travis/angular/angular-cli/master.svg?label=travis)][travis-badge-url]
5[![CircleCI branch](https://img.shields.io/circleci/project/github/angular/angular-cli/master.svg?label=circleci)](https://circleci.com/gh/angular/angular-cli)
6[![Dependency Status][david-badge]][david-badge-url]
7[![devDependency Status][david-dev-badge]][david-dev-badge-url]
8
9[![npm](https://img.shields.io/npm/v/%40angular/cli.svg)][npm-badge-url]
10[![npm](https://img.shields.io/npm/v/%40angular/cli/next.svg)][npm-badge-url]
11[![npm](https://img.shields.io/npm/l/@angular/cli.svg)][npm-badge-url]
12[![npm](https://img.shields.io/npm/dm/@angular/cli.svg)][npm-badge-url]
13
14[![Join the chat at https://gitter.im/angular/angular-cli](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/angular/angular-cli?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
15[![Caretaker](https://img.shields.io/badge/caretaker-filipesilva-blue.svg)](https://github.com/filipesilva)
16
17[![GitHub forks](https://img.shields.io/github/forks/angular/angular-cli.svg?style=social&label=Fork)](https://github.com/angular/angular-cli/fork)
18[![GitHub stars](https://img.shields.io/github/stars/angular/angular-cli.svg?style=social&label=Star)](https://github.com/angular/angular-cli)
19
20
21## Note
22
23If you are updating from a beta or RC version, check out our [1.0 Update Guide](https://github.com/angular/angular-cli/wiki/stories-1.0-update).
24
25If you wish to collaborate, check out [our issue list](https://github.com/angular/angular-cli/issues).
26
27Before submitting new issues, have a look at [issues marked with the `type: faq` label](https://github.com/angular/angular-cli/issues?utf8=%E2%9C%93&q=is%3Aissue%20label%3A%22type%3A%20faq%22%20).
28
29## Prerequisites
30
31Both the CLI and generated project have dependencies that require Node 6.9.0 or higher, together
32with NPM 3 or higher.
33
34## Table of Contents
35
36* [Installation](#installation)
37* [Usage](#usage)
38* [Generating a New Project](#generating-and-serving-an-angular-project-via-a-development-server)
39* [Generating Components, Directives, Pipes and Services](#generating-components-directives-pipes-and-services)
40* [Updating Angular CLI](#updating-angular-cli)
41* [Development Hints for working on Angular CLI](#development-hints-for-working-on-angular-cli)
42* [Documentation](#documentation)
43* [License](#license)
44
45## Installation
46
47**BEFORE YOU INSTALL:** please read the [prerequisites](#prerequisites)
48```bash
49npm install -g @angular/cli
50```
51
52## Usage
53
54```bash
55ng help
56```
57
58### Generating and serving an Angular project via a development server
59
60```bash
61ng new PROJECT-NAME
62cd PROJECT-NAME
63ng serve
64```
65Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
66
67You can configure the default HTTP host and port used by the development server with two command-line options :
68
69```bash
70ng serve --host 0.0.0.0 --port 4201
71```
72
73### Generating Components, Directives, Pipes and Services
74
75You can use the `ng generate` (or just `ng g`) command to generate Angular components:
76
77```bash
78ng generate component my-new-component
79ng g component my-new-component # using the alias
80
81# components support relative path generation
82# if in the directory src/app/feature/ and you run
83ng g component new-cmp
84# your component will be generated in src/app/feature/new-cmp
85# but if you were to run
86ng g component ./newer-cmp
87# your component will be generated in src/app/newer-cmp
88# if in the directory src/app you can also run
89ng g component feature/new-cmp
90# and your component will be generated in src/app/feature/new-cmp
91```
92You can find all possible blueprints in the table below:
93
94Scaffold | Usage
95--- | ---
96[Component](https://github.com/angular/angular-cli/wiki/generate-component) | `ng g component my-new-component`
97[Directive](https://github.com/angular/angular-cli/wiki/generate-directive) | `ng g directive my-new-directive`
98[Pipe](https://github.com/angular/angular-cli/wiki/generate-pipe) | `ng g pipe my-new-pipe`
99[Service](https://github.com/angular/angular-cli/wiki/generate-service) | `ng g service my-new-service`
100[Class](https://github.com/angular/angular-cli/wiki/generate-class) | `ng g class my-new-class`
101[Guard](https://github.com/angular/angular-cli/wiki/generate-guard) | `ng g guard my-new-guard`
102[Interface](https://github.com/angular/angular-cli/wiki/generate-interface) | `ng g interface my-new-interface`
103[Enum](https://github.com/angular/angular-cli/wiki/generate-enum) | `ng g enum my-new-enum`
104[Module](https://github.com/angular/angular-cli/wiki/generate-module) | `ng g module my-module`
105
106
107
108
109angular-cli will add reference to `components`, `directives` and `pipes` automatically in the `app.module.ts`. If you need to add this references to another custom module, follow this steps:
110
111 1. `ng g module new-module` to create a new module
112 2. call `ng g component new-module/new-component`
113
114This should add the new `component`, `directive` or `pipe` reference to the `new-module` you've created.
115
116### Updating Angular CLI
117
118If you're using Angular CLI `1.0.0-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`:
119```bash
120npm uninstall -g angular-cli
121npm uninstall --save-dev angular-cli
122```
123
124To update Angular CLI to a new version, you must update both the global package and your project's local package.
125
126Global package:
127```bash
128npm uninstall -g @angular/cli
129npm cache verify
130# if npm version is < 5 then use `npm cache clean`
131npm install -g @angular/cli@latest
132```
133
134Local project package:
135```bash
136rm -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
137npm install --save-dev @angular/cli@latest
138npm install
139```
140
141If you are updating to 1.0 from a beta or RC version, check out our [1.0 Update Guide](https://github.com/angular/angular-cli/wiki/stories-1.0-update).
142
143You can find more details about changes between versions in [the Releases tab on GitHub](https://github.com/angular/angular-cli/releases).
144
145
146## Development Hints for working on Angular CLI
147
148### Working with master
149
150```bash
151git clone https://github.com/angular/angular-cli.git
152cd angular-cli
153npm link
154```
155
156`npm link` is very similar to `npm install -g` except that instead of downloading the package
157from the repo, the just cloned `angular-cli/` folder becomes the global package.
158Additionally, this repository publishes several packages and we use special logic to load all of them
159on development setups.
160
161Any changes to the files in the `angular-cli/` folder will immediately affect the global `@angular/cli` package,
162allowing you to quickly test any changes you make to the cli project.
163
164Now you can use `@angular/cli` via the command line:
165
166```bash
167ng new foo
168cd foo
169npm link @angular/cli
170ng serve
171```
172
173`npm link @angular/cli` is needed because by default the globally installed `@angular/cli` just loads
174the local `@angular/cli` from the project which was fetched remotely from npm.
175`npm link @angular/cli` symlinks the global `@angular/cli` package to the local `@angular/cli` package.
176Now the `angular-cli` you cloned before is in three places:
177The folder you cloned it into, npm's folder where it stores global packages and the Angular CLI project you just created.
178
179You can also use `ng new foo --link-cli` to automatically link the `@angular/cli` package.
180
181Please read the official [npm-link documentation](https://docs.npmjs.com/cli/link)
182and the [npm-link cheatsheet](http://browsenpm.org/help#linkinganynpmpackagelocally) for more information.
183
184To run the Angular CLI test suite use the `node tests/run_e2e.js` command.
185It can also receive a filename to only run that test (e.g. `node tests/run_e2e.js tests/e2e/tests/build/dev-build.ts`).
186
187As part of the test procedure, all packages will be built and linked.
188You will need to re-run `npm link` to re-link the development Angular CLI environment after tests finish.
189
190
191## Documentation
192
193The documentation for the Angular CLI is located in this repo's [wiki](https://github.com/angular/angular-cli/wiki).
194
195## License
196
197MIT
198
199
200[travis-badge]: https://travis-ci.org/angular/angular-cli.svg?branch=master
201[travis-badge-url]: https://travis-ci.org/angular/angular-cli
202[david-badge]: https://david-dm.org/angular/angular-cli.svg
203[david-badge-url]: https://david-dm.org/angular/angular-cli
204[david-dev-badge]: https://david-dm.org/angular/angular-cli/dev-status.svg
205[david-dev-badge-url]: https://david-dm.org/angular/angular-cli?type=dev
206[npm-badge]: https://img.shields.io/npm/v/@angular/cli.svg
207[npm-badge-url]: https://www.npmjs.com/package/@angular/cli