|
| 1 | +# Workspace npm dependencies |
| 2 | + |
| 3 | +The Angular Framework, Angular CLI, and components used by Angular applications are packaged as [npm packages](https://docs.npmjs.com/getting-started/what-is-npm "What is npm?") and distributed via the [npm registry](https://docs.npmjs.com/). |
| 4 | + |
| 5 | +You can download and install these npm packages by using the [npm CLI client](https://docs.npmjs.com/cli/install), which is installed with and runs as a [Node.js®](https://nodejs.org "Nodejs.org") application. By default, the Angular CLI uses the npm client. |
| 6 | + |
| 7 | +Alternatively, you can use the [yarn client](https://yarnpkg.com/) for downloading and installing npm packages. |
| 8 | + |
| 9 | + |
| 10 | +<div class="alert is-helpful"> |
| 11 | + |
| 12 | +See [Local Environment Setup](guide/setup-local "Setting up for Local Development") for information about the required versions and installation of `Node.js` and `npm`. |
| 13 | + |
| 14 | +If you already have projects running on your machine that use other versions of Node.js and npm, consider using [nvm](https://github.com/creationix/nvm) to manage the multiple versions of Node.js and npm. |
| 15 | + |
| 16 | +</div> |
| 17 | + |
| 18 | + |
| 19 | +## `package.json` |
| 20 | + |
| 21 | +Both `npm` and `yarn` install the packages that are identified in a [`package.json`](https://docs.npmjs.com/files/package.json) file. |
| 22 | + |
| 23 | +The CLI command `ng new` creates a `package.json` file when it creates the new workspace. |
| 24 | +This `package.json` is used by all projects in the workspace, including the initial app project that is created by the CLI when it creates the workspace. |
| 25 | + |
| 26 | +Initially, this `package.json` includes _a starter set of packages_, some of which are required by Angular and others that support common application scenarios. |
| 27 | +You add packages to `package.json` as your application evolves. |
| 28 | +You may even remove some. |
| 29 | + |
| 30 | +The `package.json` is organized into two groups of packages: |
| 31 | + |
| 32 | +* [Dependencies](guide/npm-packages#dependencies) are essential to *running* applications. |
| 33 | +* [DevDependencies](guide/npm-packages#dev-dependencies) are only necessary to *develop* applications. |
| 34 | + |
| 35 | +<div class="alert is-helpful"> |
| 36 | + |
| 37 | +**Library developers:** By default, the CLI command [`ng generate library`](cli/generate) creates a `package.json` for the new library. That `package.json` is used when publishing the library to npm. |
| 38 | +For more information, see the CLI wiki page [Library Support](https://github.com/angular/angular-cli/wiki/stories-create-library). |
| 39 | +</div> |
| 40 | + |
| 41 | + |
| 42 | +{@a dependencies} |
| 43 | +## Dependencies |
| 44 | + |
| 45 | +The packages listed in the `dependencies` section of `package.json` are essential to *running* applications. |
| 46 | + |
| 47 | +The `dependencies` section of `package.json` contains: |
| 48 | + |
| 49 | +* [**Angular packages**](#angular-packages): Angular core and optional modules; their package names begin `@angular/`. |
| 50 | + |
| 51 | +* [**Support packages**](#support-packages): 3rd party libraries that must be present for Angular apps to run. |
| 52 | + |
| 53 | +* [**Polyfill packages**](#polyfills): Polyfills plug gaps in a browser's JavaScript implementation. |
| 54 | + |
| 55 | +To add a new dependency, use the [`ng add`](cli/add) command. |
| 56 | + |
| 57 | +{@a angular-packages} |
| 58 | +### Angular packages |
| 59 | + |
| 60 | +The following Angular packages are included as dependencies in the default `package.json` file for a new Angular workspace. |
| 61 | +For a complete list of Angular packages, see the [API reference](http://angular.io/api?type=package). |
| 62 | + |
| 63 | +Package name | Description |
| 64 | +---------------------------------------- | -------------------------------------------------- |
| 65 | +[**@angular/animations**](api/animations) | Angular's animations library makes it easy to define and apply animation effects such as page and list transitions. For more information, see the [Animations guide](guide/animations). |
| 66 | +[**@angular/common**](api/common) | The commonly-needed services, pipes, and directives provided by the Angular team. The [`HttpClientModule`](api/common/http/HttpClientModule) is also here, in the [`@angular/common/http`](api/common/http) subfolder. For more information, see the [HttpClient guide](guide/http). |
| 67 | +**@angular/compiler** | Angular's template compiler. It understands templates and can convert them to code that makes the application run and render. Typically you don’t interact with the compiler directly; rather, you use it indirectly via `platform-browser-dynamic` when JIT compiling in the browser. For more information, see the [Ahead-of-time Compilation guide](guide/aot-compiler). |
| 68 | +[**@angular/core**](api/core) | Critical runtime parts of the framework that are needed by every application. Includes all metadata decorators, `Component`, `Directive`, dependency injection, and the component lifecycle hooks. |
| 69 | +[**@angular/forms**](api/forms) | Support for both [template-driven](guide/forms) and [reactive forms](guide/reactive-forms). For information about choosing the best forms approach for your app, see [Introduction to forms](guide/forms-overview). |
| 70 | +[**@angular/<br />platform‑browser**](api/platform-browser) | Everything DOM and browser related, especially the pieces that help render into the DOM. This package also includes the `bootstrapModuleFactory()` method for bootstrapping applications for production builds that pre-compile with [AOT](guide/aot-compiler). |
| 71 | +[**@angular/<br />platform‑browser‑dynamic**](api/platform-browser-dynamic) | Includes [providers](api/core/Provider) and methods to compile and run the app on the client using the [JIT compiler](guide/aot-compiler). |
| 72 | +[**@angular/router**](api/router) | The router module navigates among your app pages when the browser URL changes. For more information, see [Routing and Navigation](guide/router). |
| 73 | + |
| 74 | + |
| 75 | +{@a support-packages} |
| 76 | +### Support packages |
| 77 | + |
| 78 | +The following support packages are included as dependencies in the default `package.json` file for a new Angular workspace. |
| 79 | + |
| 80 | + |
| 81 | +Package name | Description |
| 82 | +---------------------------------------- | -------------------------------------------------- |
| 83 | +[**rxjs**](https://github.com/ReactiveX/rxjs) | Many Angular APIs return [_observables_](guide/glossary#observable). RxJS is an implementation of the proposed [Observables specification](https://github.com/tc39/proposal-observable) currently before the [TC39](https://www.ecma-international.org/memento/tc39.htm) committee, which determines standards for the JavaScript language. |
| 84 | +[**zone.js**](https://github.com/angular/zone.js) | Angular relies on zone.js to run Angular's change detection processes when native JavaScript operations raise events. Zone.js is an implementation of a [specification](https://gist.github.com/mhevery/63fdcdf7c65886051d55) currently before the [TC39](https://www.ecma-international.org/memento/tc39.htm) committee that determines standards for the JavaScript language. |
| 85 | + |
| 86 | + |
| 87 | +{@a polyfills} |
| 88 | +### Polyfill packages |
| 89 | + |
| 90 | +Many browsers lack native support for some features in the latest HTML standards, |
| 91 | +features that Angular requires. |
| 92 | +[_Polyfills_](https://en.wikipedia.org/wiki/Polyfill_(programming)) can emulate the missing features. |
| 93 | +The [Browser Support](guide/browser-support) guide explains which browsers need polyfills and |
| 94 | +how you can add them. |
| 95 | + |
| 96 | + |
| 97 | +{@a dev-dependencies} |
| 98 | + |
| 99 | +## DevDependencies |
| 100 | + |
| 101 | +The packages listed in the `devDependencies` section of `package.json` help you develop the application on your local machine. You don't deploy them with the production application. |
| 102 | + |
| 103 | +To add a new `devDependency`, use either one of the following commands: |
| 104 | + |
| 105 | +<code-example language="sh" class="code-shell"> |
| 106 | + npm install --save-dev <package-name> |
| 107 | +</code-example> |
| 108 | + |
| 109 | +<code-example language="sh" class="code-shell"> |
| 110 | + yarn add --dev <package-name> |
| 111 | +</code-example> |
| 112 | + |
| 113 | +The following `devDependencies` are provided in the default `package.json` file for a new Angular workspace. |
| 114 | + |
| 115 | + |
| 116 | +Package name | Description |
| 117 | +---------------------------------------- | ----------------------------------- |
| 118 | +[**@angular‑devkit/<br />build‑angular**](https://github.com/angular/angular-cli/) | The Angular build tools. |
| 119 | +[**@angular/cli**](https://github.com/angular/angular-cli/) | The Angular CLI tools. |
| 120 | +**@angular/<br />compiler‑cli** | The Angular compiler, which is invoked by the Angular CLI's `ng build` and `ng serve` commands. |
| 121 | +**@types/... ** | TypeScript definition files for 3rd party libraries such as Jasmine and Node.js. |
| 122 | +[**codelyzer**](https://www.npmjs.com/package/codelyzer) | A linter for Angular apps whose rules conform to the Angular [style guide](guide/styleguide). |
| 123 | +**jasmine/... ** | Packages to support the [Jasmine](https://jasmine.github.io/) test library. |
| 124 | +**karma/... ** | Packages to support the [karma](https://www.npmjs.com/package/karma) test runner. |
| 125 | +[**protractor**](https://www.npmjs.com/package/protractor) | An end-to-end (e2e) framework for Angular apps. Built on top of [WebDriverJS](https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs). |
| 126 | +[**ts-node**](https://www.npmjs.com/package/ts-node) | TypeScript execution environment and REPL for Node.js. |
| 127 | +[**tslint**](https://www.npmjs.com/package/tslint) | A static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. |
| 128 | +[**typescript**](https://www.npmjs.com/package/typescript) | The TypeScript language server, including the *tsc* TypeScript compiler. |
| 129 | + |
| 130 | + |
| 131 | +## Related information |
| 132 | + |
| 133 | + For information about how the Angular CLI handles packages see the following guides: |
| 134 | + |
| 135 | + * [Building and serving](guide/build) describes how packages come together to create a development build. |
| 136 | + * [Deployment](guide/deployment) describes how packages come together to create a production build. |
| 137 | + |
0 commit comments