You can download and install these npm packages with the npm client, which runs as a node.js application.
The yarn client is a popular alternative for downloading and installing npm packages. The Angular CLI uses
yarn by default to install npm packages when you create a new project.
Node.js and npm are essential to Angular development.
Get them now if they're not already installed on your machine.
Verify that you are running node
v4.x.xor higher and npm
3.x.xor higher by running the commands
npm -vin a terminal/console window. Older versions produce errors.
yarn install packages identified in a package.json file.
ng new command creates a default
package.json file for your project. This
package.json specifies a starter set of packages that work well together and jointly support many common application scenarios.
You will add packages to
package.json as your application evolves. You may even remove some.
This guide focuses on the most important packages in the starter set.
The dependencies are essential to running the application. The devDependencies are only necessary to develop the application.
dependencies section of
Angular packages: Angular core and optional modules; their package names begin
Support packages: 3rd party libraries that must be present for Angular apps to run.
@angular/animations: Angular's animations library makes it easy to define and apply animation effects such as page and list transitions. Read about it in the Animations guide.
@angular/common: The commonly needed services, pipes, and directives provided by the Angular team. The
HttpClientModule is also here, in the '@angular/common/http' subfolder.
@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.
@angular/http: Angular's old, soon-to-be-deprecated, HTTP client.
@angular/platform-browser: Everything DOM and browser related, especially the pieces that help render into the DOM. This package also includes the
bootstrapStatic() method for bootstrapping applications for production builds that pre-compile with AOT.
@angular/router: The router module navigates among your app pages when the browser URL changes.
@angular/upgrade: Set of utilities for upgrading AngularJS applications to Angular.
Many browsers lack native support for some features in the latest HTML standards, features that Angular requires. "Polyfills" can emulate the missing features. The Browser Support guide explains which browsers need polyfills and how you can add them.
package.json installs the core-js package which polyfills missing features for several popular browser.
The packages listed in the devDependencies section of the
package.json help you develop the application on your local machine.
You don't deploy them with the production application although there is no harm in doing so.
@angular/cli: The Angular CLI tools.
@angular/compiler-cli: The Angular compiler, which is invoked by the Angular CLI's
@angular/language-service: The Angular language service analyzes component templates and provides type and error information that TypeScript-aware editors can use to improve the developer's experience. For example, see the Angular language service extension for VS Code
@types/... : TypeScript definition files for 3rd party libraries such as Jasmine and node.
jasmine/... : packages to support the Jasmine test library.
karma/... : packages to support the karma test runner.
ts-node: TypeScript execution environment and REPL for node.
tslint: a static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.
typescript: the TypeScript language server, including the tsc TypeScript compiler.
package.json installs more packages than you'll need for your project.
A given package may contain tens, hundreds, even thousands of files, all of them in your local machine's
node_modules directory. The sheer volume of files is intimidating,
You can remove packages that you don't need but how can you be sure that you won't need it? As a practical matter, it's better to install a package you don't need than worry about it. Extra packages and package files on your local development machine are harmless.
By default the Angular CLI build process bundles into a single file just the few "vendor" library files that your application actually needs. The browser downloads this bundle, not the original package files.
See the Deployment to learn more.
© 2010–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.