5 lines
16 KiB
JSON
5 lines
16 KiB
JSON
{
|
||
"id": "guide/npm-packages",
|
||
"title": "Workspace npm dependencies",
|
||
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/npm-packages.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"workspace-npm-dependencies\">Workspace npm dependencies<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/npm-packages#workspace-npm-dependencies\"><i class=\"material-icons\">link</i></a></h1>\n<p>The Angular Framework, Angular CLI, and components used by Angular applications are packaged as <a href=\"https://docs.npmjs.com/getting-started/what-is-npm\" title=\"What is npm?\">npm packages</a> and distributed via the <a href=\"https://docs.npmjs.com/\">npm registry</a>.</p>\n<p>You can download and install these npm packages by using the <a href=\"https://docs.npmjs.com/cli/install\">npm CLI client</a>, which is installed with and runs as a <a href=\"https://nodejs.org\" title=\"Nodejs.org\">Node.js®</a> application. By default, the Angular CLI uses the npm client.</p>\n<p>Alternatively, you can use the <a href=\"https://yarnpkg.com/\">yarn client</a> for downloading and installing npm packages.</p>\n<div class=\"alert is-helpful\">\n<p>See <a href=\"guide/setup-local\" title=\"Setting up for Local Development\">Local Environment Setup</a> for information about the required versions and installation of <code>Node.js</code> and <code>npm</code>.</p>\n<p>If you already have projects running on your machine that use other versions of Node.js and npm, consider using <a href=\"https://github.com/creationix/nvm\">nvm</a> to manage the multiple versions of Node.js and npm.</p>\n</div>\n<h2 id=\"packagejson\"><code>package.json</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/npm-packages#packagejson\"><i class=\"material-icons\">link</i></a></h2>\n<p>Both <code>npm</code> and <code>yarn</code> install the packages that are identified in a <a href=\"https://docs.npmjs.com/files/package.json\"><code>package.json</code></a> file.</p>\n<p>The CLI command <code>ng new</code> creates a <code>package.json</code> file when it creates the new workspace.\nThis <code>package.json</code> is used by all projects in the workspace, including the initial app project that is created by the CLI when it creates the workspace.</p>\n<p>Initially, this <code>package.json</code> includes <em>a starter set of packages</em>, some of which are required by Angular and others that support common application scenarios.\nYou add packages to <code>package.json</code> as your application evolves.\nYou may even remove some.</p>\n<p>The <code>package.json</code> is organized into two groups of packages:</p>\n<ul>\n<li><a href=\"guide/npm-packages#dependencies\">Dependencies</a> are essential to <em>running</em> applications.</li>\n<li><a href=\"guide/npm-packages#dev-dependencies\">DevDependencies</a> are only necessary to <em>develop</em> applications.</li>\n</ul>\n<div class=\"alert is-helpful\">\n<p><strong>Library developers:</strong> By default, the CLI command <a href=\"cli/generate\"><code>ng generate library</code></a> creates a <code>package.json</code> for the new library. That <code>package.json</code> is used when publishing the library to npm.\nFor more information, see the CLI wiki page <a href=\"https://github.com/angular/angular-cli/wiki/stories-create-library\">Library Support</a>.</p>\n</div>\n<a id=\"dependencies\"></a>\n<h2 id=\"dependencies\">Dependencies<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/npm-packages#dependencies\"><i class=\"material-icons\">link</i></a></h2>\n<p>The packages listed in the <code>dependencies</code> section of <code>package.json</code> are essential to <em>running</em> applications.</p>\n<p>The <code>dependencies</code> section of <code>package.json</code> contains:</p>\n<ul>\n<li>\n<p><a href=\"guide/npm-packages#angular-packages\"><strong>Angular packages</strong></a>: Angular core and optional modules; their package names begin <code>@angular/</code>.</p>\n</li>\n<li>\n<p><a href=\"guide/npm-packages#support-packages\"><strong>Support packages</strong></a>: 3rd party libraries that must be present for Angular apps to run.</p>\n</li>\n<li>\n<p><a href=\"guide/npm-packages#polyfills\"><strong>Polyfill packages</strong></a>: Polyfills plug gaps in a browser's JavaScript implementation.</p>\n</li>\n</ul>\n<p>To add a new dependency, use the <a href=\"cli/add\"><code>ng add</code></a> command.</p>\n<a id=\"angular-packages\"></a>\n<h3 id=\"angular-packages\">Angular packages<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/npm-packages#angular-packages\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following Angular packages are included as dependencies in the default <code>package.json</code> file for a new Angular workspace.\nFor a complete list of Angular packages, see the <a href=\"https://angular.io/api?type=package\">API reference</a>.</p>\n<table>\n<thead>\n<tr>\n<th>Package name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a href=\"api/animations\"><strong>@angular/animations</strong></a></td>\n<td>Angular's animations library makes it easy to define and apply animation effects such as page and list transitions. For more information, see the <a href=\"guide/animations\">Animations guide</a>.</td>\n</tr>\n<tr>\n<td><a href=\"api/common\"><strong>@angular/common</strong></a></td>\n<td>The commonly-needed services, pipes, and directives provided by the Angular team. The <a href=\"api/common/http/HttpClientModule\"><code>HttpClientModule</code></a> is also here, in the <a href=\"api/common/http\"><code>@angular/common/http</code></a> subfolder. For more information, see the <a href=\"guide/http\">HttpClient guide</a>.</td>\n</tr>\n<tr>\n<td><strong>@angular/compiler</strong></td>\n<td>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 <code>platform-browser-dynamic</code> when JIT compiling in the browser. For more information, see the <a href=\"guide/aot-compiler\">Ahead-of-time Compilation guide</a>.</td>\n</tr>\n<tr>\n<td><a href=\"api/core\"><strong>@angular/core</strong></a></td>\n<td>Critical runtime parts of the framework that are needed by every application. Includes all metadata decorators, <code><a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code>, <code><a href=\"api/core/Directive\" class=\"code-anchor\">Directive</a></code>, dependency injection, and the component lifecycle hooks.</td>\n</tr>\n<tr>\n<td><a href=\"api/forms\"><strong>@angular/forms</strong></a></td>\n<td>Support for both <a href=\"guide/forms\">template-driven</a> and <a href=\"guide/reactive-forms\">reactive forms</a>. For information about choosing the best forms approach for your app, see <a href=\"guide/forms-overview\">Introduction to forms</a>.</td>\n</tr>\n<tr>\n<td><a href=\"api/platform-browser\"><strong>@angular/<br>platform‑browser</strong></a></td>\n<td>Everything DOM and browser related, especially the pieces that help render into the DOM. This package also includes the <code>bootstrapModuleFactory()</code> method for bootstrapping applications for production builds that pre-compile with <a href=\"guide/aot-compiler\">AOT</a>.</td>\n</tr>\n<tr>\n<td><a href=\"api/platform-browser-dynamic\"><strong>@angular/<br>platform‑browser‑dynamic</strong></a></td>\n<td>Includes <a href=\"api/core/Provider\">providers</a> and methods to compile and run the app on the client using the <a href=\"guide/aot-compiler\">JIT compiler</a>.</td>\n</tr>\n<tr>\n<td><a href=\"api/router\"><strong>@angular/router</strong></a></td>\n<td>The router module navigates among your app pages when the browser URL changes. For more information, see <a href=\"guide/router\">Routing and Navigation</a>.</td>\n</tr>\n</tbody>\n</table>\n<a id=\"support-packages\"></a>\n<h3 id=\"support-packages\">Support packages<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/npm-packages#support-packages\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following support packages are included as dependencies in the default <code>package.json</code> file for a new Angular workspace.</p>\n<table>\n<thead>\n<tr>\n<th>Package name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a href=\"https://github.com/ReactiveX/rxjs\"><strong>rxjs</strong></a></td>\n<td>Many Angular APIs return <a href=\"guide/glossary#observable\"><em>observables</em></a>. RxJS is an implementation of the proposed <a href=\"https://github.com/tc39/proposal-observable\">Observables specification</a> currently before the <a href=\"https://www.ecma-international.org/memento/tc39.htm\">TC39</a> committee, which determines standards for the JavaScript language.</td>\n</tr>\n<tr>\n<td><a href=\"https://github.com/angular/zone.js\"><strong>zone.js</strong></a></td>\n<td>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 <a href=\"https://gist.github.com/mhevery/63fdcdf7c65886051d55\">specification</a> currently before the <a href=\"https://www.ecma-international.org/memento/tc39.htm\">TC39</a> committee that determines standards for the JavaScript language.</td>\n</tr>\n</tbody>\n</table>\n<a id=\"polyfills\"></a>\n<h3 id=\"polyfill-packages\">Polyfill packages<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/npm-packages#polyfill-packages\"><i class=\"material-icons\">link</i></a></h3>\n<p>Many browsers lack native support for some features in the latest HTML standards,\nfeatures that Angular requires.\n<a href=\"https://en.wikipedia.org/wiki/Polyfill_(programming)\"><em>Polyfills</em></a> can emulate the missing features.\nThe <a href=\"guide/browser-support\">Browser Support</a> guide explains which browsers need polyfills and\nhow you can add them.</p>\n<a id=\"dev-dependencies\"></a>\n<h2 id=\"devdependencies\">DevDependencies<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/npm-packages#devdependencies\"><i class=\"material-icons\">link</i></a></h2>\n<p>The packages listed in the <code>devDependencies</code> section of <code>package.json</code> help you develop the application on your local machine. You don't deploy them with the production application.</p>\n<p>To add a new <code>devDependency</code>, use either one of the following commands:</p>\n<code-example language=\"sh\" class=\"code-shell\">\n npm install --save-dev <package-name>\n</code-example>\n<code-example language=\"sh\" class=\"code-shell\">\n yarn add --dev <package-name>\n</code-example>\n<p>The following <code>devDependencies</code> are provided in the default <code>package.json</code> file for a new Angular workspace.</p>\n<table>\n<thead>\n<tr>\n<th>Package name</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><a href=\"https://github.com/angular/angular-cli/\"><strong>@angular‑devkit/<br>build‑angular</strong></a></td>\n<td>The Angular build tools.</td>\n</tr>\n<tr>\n<td><a href=\"https://github.com/angular/angular-cli/\"><strong>@angular/cli</strong></a></td>\n<td>The Angular CLI tools.</td>\n</tr>\n<tr>\n<td><strong>@angular/<br>compiler‑cli</strong></td>\n<td>The Angular compiler, which is invoked by the Angular CLI's <code>ng build</code> and <code>ng serve</code> commands.</td>\n</tr>\n<tr>\n<td><strong>@types/... </strong></td>\n<td>TypeScript definition files for 3rd party libraries such as Jasmine and Node.js.</td>\n</tr>\n<tr>\n<td><a href=\"https://www.npmjs.com/package/codelyzer\"><strong>codelyzer</strong></a></td>\n<td>A linter for Angular apps whose rules conform to the Angular <a href=\"guide/styleguide\">style guide</a>.</td>\n</tr>\n<tr>\n<td><strong>jasmine/... </strong></td>\n<td>Packages to support the <a href=\"https://jasmine.github.io/\">Jasmine</a> test library.</td>\n</tr>\n<tr>\n<td><strong>karma/... </strong></td>\n<td>Packages to support the <a href=\"https://www.npmjs.com/package/karma\">karma</a> test runner.</td>\n</tr>\n<tr>\n<td><a href=\"https://www.npmjs.com/package/protractor\"><strong>protractor</strong></a></td>\n<td>An end-to-end (e2e) framework for Angular apps. Built on top of <a href=\"https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs\">WebDriverJS</a>.</td>\n</tr>\n<tr>\n<td><a href=\"https://www.npmjs.com/package/ts-node\"><strong>ts-node</strong></a></td>\n<td>TypeScript execution environment and REPL for Node.js.</td>\n</tr>\n<tr>\n<td><a href=\"https://www.npmjs.com/package/tslint\"><strong>tslint</strong></a></td>\n<td>A static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.</td>\n</tr>\n<tr>\n<td><a href=\"https://www.npmjs.com/package/typescript\"><strong>typescript</strong></a></td>\n<td>The TypeScript language server, including the <em>tsc</em> TypeScript compiler.</td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"related-information\">Related information<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/npm-packages#related-information\"><i class=\"material-icons\">link</i></a></h2>\n<p> For information about how the Angular CLI handles packages see the following guides:</p>\n<ul>\n<li>\n<p><a href=\"guide/build\">Building and serving</a> describes how packages come together to create a development build.</p>\n</li>\n<li>\n<p><a href=\"guide/deployment\">Deployment</a> describes how packages come together to create a production build.</p>\n</li>\n</ul>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/architecture-next-steps\n - guide/file-structure\n - guide/glossary\n - guide/i18n\n - guide/libraries\n - guide/using-libraries\n-->\n<!-- links from this doc:\n - api/animations\n - api/common\n - api/common/http\n - api/common/http/HttpClientModule\n - api/core\n - api/core/Component\n - api/core/Directive\n - api/core/Provider\n - api/forms\n - api/platform-browser\n - api/platform-browser-dynamic\n - api/router\n - cli/add\n - cli/generate\n - guide/animations\n - guide/aot-compiler\n - guide/browser-support\n - guide/build\n - guide/deployment\n - guide/forms\n - guide/forms-overview\n - guide/glossary#observable\n - guide/http\n - guide/npm-packages#angular-packages\n - guide/npm-packages#dependencies\n - guide/npm-packages#dev-dependencies\n - guide/npm-packages#devdependencies\n - guide/npm-packages#packagejson\n - guide/npm-packages#polyfill-packages\n - guide/npm-packages#polyfills\n - guide/npm-packages#related-information\n - guide/npm-packages#support-packages\n - guide/npm-packages#workspace-npm-dependencies\n - guide/reactive-forms\n - guide/router\n - guide/setup-local\n - guide/styleguide\n - https://angular.io/api?type=package\n - https://docs.npmjs.com/\n - https://docs.npmjs.com/cli/install\n - https://docs.npmjs.com/files/package.json\n - https://docs.npmjs.com/getting-started/what-is-npm\n - https://en.wikipedia.org/wiki/Polyfill_(programming)\n - https://gist.github.com/mhevery/63fdcdf7c65886051d55\n - https://github.com/ReactiveX/rxjs\n - https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs\n - https://github.com/angular/angular-cli/\n - https://github.com/angular/angular-cli/wiki/stories-create-library\n - https://github.com/angular/angular/edit/master/aio/content/guide/npm-packages.md?message=docs%3A%20describe%20your%20change...\n - https://github.com/angular/zone.js\n - https://github.com/creationix/nvm\n - https://github.com/tc39/proposal-observable\n - https://jasmine.github.io/\n - https://nodejs.org\n - https://www.ecma-international.org/memento/tc39.htm\n - https://www.npmjs.com/package/codelyzer\n - https://www.npmjs.com/package/karma\n - https://www.npmjs.com/package/protractor\n - https://www.npmjs.com/package/ts-node\n - https://www.npmjs.com/package/tslint\n - https://www.npmjs.com/package/typescript\n - https://yarnpkg.com/\n-->"
|
||
} |