{ "id": "guide/npm-packages", "title": "Workspace npm dependencies", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Workspace npm dependencieslink

\n

The Angular Framework, Angular CLI, and components used by Angular applications are packaged as npm packages and distributed via the npm registry.

\n

You can download and install these npm packages by using the npm CLI client, which is installed with and runs as a Node.js® application. By default, the Angular CLI uses the npm client.

\n

Alternatively, you can use the yarn client for downloading and installing npm packages.

\n
\n

See Local Environment Setup for information about the required versions and installation of Node.js and npm.

\n

If you already have projects running on your machine that use other versions of Node.js and npm, consider using nvm to manage the multiple versions of Node.js and npm.

\n
\n

package.jsonlink

\n

Both npm and yarn install the packages that are identified in a package.json file.

\n

The CLI command ng new creates a package.json file when it creates the new workspace.\nThis 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.

\n

Initially, this package.json includes a starter set of packages, some of which are required by Angular and others that support common application scenarios.\nYou add packages to package.json as your application evolves.\nYou may even remove some.

\n

The package.json is organized into two groups of packages:

\n\n
\n

Library developers: By default, the CLI command ng generate library creates a package.json for the new library. That package.json is used when publishing the library to npm.\nFor more information, see the CLI wiki page Library Support.

\n
\n\n

Dependencieslink

\n

The packages listed in the dependencies section of package.json are essential to running applications.

\n

The dependencies section of package.json contains:

\n\n

To add a new dependency, use the ng add command.

\n\n

Angular packageslink

\n

The following Angular packages are included as dependencies in the default package.json file for a new Angular workspace.\nFor a complete list of Angular packages, see the API reference.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Package nameDescription
@angular/animationsAngular'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.
@angular/commonThe commonly-needed services, pipes, and directives provided by the Angular team. The HttpClientModule is also here, in the @angular/common/http subfolder. For more information, see the HttpClient guide.
@angular/compilerAngular'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.
@angular/coreCritical runtime parts of the framework that are needed by every application. Includes all metadata decorators, Component, Directive, dependency injection, and the component lifecycle hooks.
@angular/formsSupport for both template-driven and reactive forms. For information about choosing the best forms approach for your app, see Introduction to forms.
@angular/
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.
@angular/
platform‑browser‑dynamic		Includes providers and methods to compile and run the app on the client using the JIT compiler.
@angular/routerThe router module navigates among your app pages when the browser URL changes. For more information, see Routing and Navigation.
\n\n

Support packageslink

\n

The following support packages are included as dependencies in the default package.json file for a new Angular workspace.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Package nameDescription
rxjsMany Angular APIs return observables. RxJS is an implementation of the proposed Observables specification currently before the TC39 committee, which determines standards for the JavaScript language.
zone.jsAngular 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 currently before the TC39 committee that determines standards for the JavaScript language.
\n\n

Polyfill packageslink

\n

Many browsers lack native support for some features in the latest HTML standards,\nfeatures that Angular requires.\nPolyfills can emulate the missing features.\nThe Browser Support guide explains which browsers need polyfills and\nhow you can add them.

\n\n

DevDependencieslink

\n

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.

\n

To add a new devDependency, use either one of the following commands:

\n\n npm install --save-dev <package-name>\n\n\n yarn add --dev <package-name>\n\n

The following devDependencies are provided in the default package.json file for a new Angular workspace.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Package nameDescription
@angular‑devkit/
build‑angular		The Angular build tools.
@angular/cliThe Angular CLI tools.
@angular/
compiler‑cli		The Angular compiler, which is invoked by the Angular CLI's ng build and ng serve commands.
@types/... TypeScript definition files for 3rd party libraries such as Jasmine and Node.js.
codelyzerA linter for Angular apps whose rules conform to the Angular style guide.
jasmine/... Packages to support the Jasmine test library.
karma/... Packages to support the karma test runner.
protractorAn end-to-end (e2e) framework for Angular apps. Built on top of WebDriverJS.
ts-nodeTypeScript execution environment and REPL for Node.js.
tslintA static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.
typescriptThe TypeScript language server, including the tsc TypeScript compiler.
\n

Related informationlink

\n

For information about how the Angular CLI handles packages see the following guides:

\n\n\n \n
\n\n\n" }