source: trip-planner-front/node_modules/@angular/cli/README.md@ 6a80231

Last change on this file since 6a80231 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 11.0 KB
Line 
1## Angular CLI
2
3<!-- Badges section here. -->
4
5[![Dependency Status][david-badge]][david-badge-url]
6[![devDependency Status][david-dev-badge]][david-dev-badge-url]
7
8[![npm](https://img.shields.io/npm/v/%40angular/cli.svg)][npm-badge-url]
9[![npm](https://img.shields.io/npm/v/%40angular/cli/next.svg)][npm-badge-url]
10[![npm](https://img.shields.io/npm/l/@angular/cli.svg)][license-url]
11[![npm](https://img.shields.io/npm/dm/@angular/cli.svg)][npm-badge-url]
12
13[![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)
14
15[![GitHub forks](https://img.shields.io/github/forks/angular/angular-cli.svg?style=social&label=Fork)](https://github.com/angular/angular-cli/fork)
16[![GitHub stars](https://img.shields.io/github/stars/angular/angular-cli.svg?style=social&label=Star)](https://github.com/angular/angular-cli)
17
18## Note
19
20If 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).
21
22If you wish to collaborate, check out [our issue list](https://github.com/angular/angular-cli/issues).
23
24Before 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).
25
26## Prerequisites
27
28Both the CLI and generated project have dependencies that require Node 8.9 or higher, together
29with NPM 5.5.1 or higher.
30
31## Table of Contents
32
33- [Installation](#installation)
34- [Usage](#usage)
35- [Generating a New Project](#generating-and-serving-an-angular-project-via-a-development-server)
36- [Generating Components, Directives, Pipes and Services](#generating-components-directives-pipes-and-services)
37- [Updating Angular CLI](#updating-angular-cli)
38- [Development Hints for working on Angular CLI](#development-hints-for-working-on-angular-cli)
39- [Documentation](#documentation)
40- [License](#license)
41
42## Installation
43
44**BEFORE YOU INSTALL:** please read the [prerequisites](#prerequisites)
45
46### Install Globally
47
48```bash
49npm install -g @angular/cli
50```
51
52### Install Locally
53
54```bash
55npm install @angular/cli
56```
57
58To run a locally installed version of the angular-cli, you can call `ng` commands directly by adding the `.bin` folder within your local `node_modules` folder to your PATH. The `node_modules` and `.bin` folders are created in the directory where `npm install @angular/cli` was run upon completion of the install command.
59
60Alternatively, you can install [npx](https://www.npmjs.com/package/npx) and run `npx ng <command>` within the local directory where `npm install @angular/cli` was run, which will use the locally installed angular-cli.
61
62### Install Specific Version (Example: 6.1.1)
63
64```bash
65npm install -g @angular/cli@6.1.1
66```
67
68## Usage
69
70```bash
71ng help
72```
73
74### Generating and serving an Angular project via a development server
75
76```bash
77ng new PROJECT-NAME
78cd PROJECT-NAME
79ng serve
80```
81
82Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
83
84You can configure the default HTTP host and port used by the development server with two command-line options :
85
86```bash
87ng serve --host 0.0.0.0 --port 4201
88```
89
90### Generating Components, Directives, Pipes and Services
91
92You can use the `ng generate` (or just `ng g`) command to generate Angular components:
93
94```bash
95ng generate component my-new-component
96ng g component my-new-component # using the alias
97
98# components support relative path generation
99# if in the directory src/app/feature/ and you run
100ng g component new-cmp
101# your component will be generated in src/app/feature/new-cmp
102# but if you were to run
103ng g component ./newer-cmp
104# your component will be generated in src/app/newer-cmp
105# if in the directory src/app you can also run
106ng g component feature/new-cmp
107# and your component will be generated in src/app/feature/new-cmp
108```
109
110You can find all possible blueprints in the table below:
111
112| Scaffold | Usage |
113| ------------------------------------------------------ | --------------------------------- |
114| [Component](https://angular.io/cli/generate#component) | `ng g component my-new-component` |
115| [Directive](https://angular.io/cli/generate#directive) | `ng g directive my-new-directive` |
116| [Pipe](https://angular.io/cli/generate#pipe) | `ng g pipe my-new-pipe` |
117| [Service](https://angular.io/cli/generate#service) | `ng g service my-new-service` |
118| [Class](https://angular.io/cli/generate#class) | `ng g class my-new-class` |
119| [Guard](https://angular.io/cli/generate#guard) | `ng g guard my-new-guard` |
120| [Interface](https://angular.io/cli/generate#interface) | `ng g interface my-new-interface` |
121| [Enum](https://angular.io/cli/generate#enum) | `ng g enum my-new-enum` |
122| [Module](https://angular.io/cli/generate#module) | `ng g module my-module` |
123
124angular-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 these steps:
125
1261. `ng g module new-module` to create a new module
1272. call `ng g component new-module/new-component`
128
129This should add the new `component`, `directive` or `pipe` reference to the `new-module` you've created.
130
131### Updating Angular CLI
132
133If 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`:
134
135```bash
136npm uninstall -g angular-cli
137npm uninstall --save-dev angular-cli
138```
139
140To update Angular CLI to a new version, you must update both the global package and your project's local package.
141
142Global package:
143
144```bash
145npm uninstall -g @angular/cli
146npm cache verify
147# if npm version is < 5 then use `npm cache clean`
148npm install -g @angular/cli@latest
149```
150
151Local project package:
152
153```bash
154rm -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
155npm install --save-dev @angular/cli@latest
156npm install
157```
158
159If 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).
160
161You can find more details about changes between versions in [the Releases tab on GitHub](https://github.com/angular/angular-cli/releases).
162
163## Development Hints for working on Angular CLI
164
165### Working with master
166
167```bash
168git clone https://github.com/angular/angular-cli.git
169yarn
170npm run build
171cd dist/@angular/cli
172npm link
173```
174
175`npm link` is very similar to `npm install -g` except that instead of downloading the package
176from the repo, the just built `dist/@angular/cli/` folder becomes the global package.
177Additionally, this repository publishes several packages and we use special logic to load all of them
178on development setups.
179
180Any changes to the files in the `angular-cli/` folder will immediately affect the global `@angular/cli` package,
181meaning that, in order to quickly test any changes you make to the cli project, you should simply just run `npm run build`
182again.
183
184Now you can use `@angular/cli` via the command line:
185
186```bash
187ng new foo
188cd foo
189npm link @angular/cli
190ng serve
191```
192
193`npm link @angular/cli` is needed because by default the globally installed `@angular/cli` just loads
194the local `@angular/cli` from the project which was fetched remotely from npm.
195`npm link @angular/cli` symlinks the global `@angular/cli` package to the local `@angular/cli` package.
196Now the `angular-cli` you cloned before is in three places:
197The folder you cloned it into, npm's folder where it stores global packages and the Angular CLI project you just created.
198
199You can also use `ng new foo --link-cli` to automatically link the `@angular/cli` package.
200
201Please read the official [npm-link documentation](https://docs.npmjs.com/cli/link)
202and the [npm-link cheatsheet](http://browsenpm.org/help#linkinganynpmpackagelocally) for more information.
203
204To run the Angular CLI E2E test suite, use the `node ./tests/legacy-cli/run_e2e` command.
205It can also receive a filename to only run that test (e.g. `node ./tests/legacy-cli/run_e2e tests/legacy-cli/e2e/tests/build/dev-build.ts`).
206
207As part of the test procedure, all packages will be built and linked.
208You will need to re-run `npm link` to re-link the development Angular CLI environment after tests finish.
209
210### Debugging with VS Code
211
212In order to debug some Angular CLI behaviour using Visual Studio Code, you can run `npm run build`, and then use a launch configuration like the following:
213
214```json
215{
216 "type": "node",
217 "request": "launch",
218 "name": "ng serve",
219 "cwd": "<path to an Angular project generated with Angular-CLI>",
220 "program": "${workspaceFolder}/dist/@angular/cli/bin/ng",
221 "args": [
222 "<ng command>",
223 ...other arguments
224 ],
225 "console": "integratedTerminal"
226}
227```
228
229Then you can add breakpoints in `dist/@angular` files.
230
231For more informations about Node.js debugging in VS Code, see the related [VS Code Documentation](https://code.visualstudio.com/docs/nodejs/nodejs-debugging).
232
233### CPU Profiling
234
235In order to investigate performance issues, CPU profiling is often useful.
236
237To capture a CPU profiling, you can:
238
2391. install the v8-profiler-node8 dependency: `npm install v8-profiler-node8 --no-save`
2401. set the NG_CLI_PROFILING Environment variable to the file name you want:
241 - on Unix systems (Linux & Mac OS X): ̀`export NG_CLI_PROFILING=my-profile`
242 - on Windows: ̀̀`setx NG_CLI_PROFILING my-profile`
243
244Then, just run the ng command on which you want to capture a CPU profile.
245You will then obtain a `my-profile.cpuprofile` file in the folder from which you ran the ng command.
246
247You can use the Chrome Devtools to process it. To do so:
248
2491. open `chrome://inspect/#devices` in Chrome
2501. click on "Open dedicated DevTools for Node"
2511. go to the "profiler" tab
2521. click on the "Load" button and select the generated .cpuprofile file
2531. on the left panel, select the associated file
254
255In addition to this one, another, more elaborated way to capture a CPU profile using the Chrome Devtools is detailed in https://github.com/angular/angular-cli/issues/8259#issue-269908550.
256
257## Documentation
258
259The documentation for the Angular CLI is located on our [documentation website](https://angular.io/cli).
260
261## License
262
263[MIT](https://github.com/angular/angular-cli/blob/master/LICENSE)
264
265[travis-badge]: https://travis-ci.org/angular/angular-cli.svg?branch=master
266[travis-badge-url]: https://travis-ci.org/angular/angular-cli
267[david-badge]: https://david-dm.org/angular/angular-cli.svg
268[david-badge-url]: https://david-dm.org/angular/angular-cli
269[david-dev-badge]: https://david-dm.org/angular/angular-cli/dev-status.svg
270[david-dev-badge-url]: https://david-dm.org/angular/angular-cli?type=dev
271[npm-badge]: https://img.shields.io/npm/v/@angular/cli.svg
272[npm-badge-url]: https://www.npmjs.com/package/@angular/cli
273[license-url]: https://github.com/angular/angular-cli/blob/master/LICENSE
Note: See TracBrowser for help on using the repository browser.