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