npm 包

Angular CLI、Angular 应用程序以及 Angular 本身都依赖于很多第三方包(包括 Angular 自己)提供的特性和功能。这些都是 npm 包。

你可以使用 npm 来安装这些 npm 包，npm 命令也是一个 Node.js® 应用。

yarn 是另一个下载和安装 npm 包的工具。 当创建新项目时，Angular CLI 默认使用 yarn 来安装 npm 包。

Node.js 和 npm 是做 Angular 开发的基础。

如果你的电脑上还没有装过，请 立即获取它们！

在终端/控制器窗口运行命令 node -v 和 npm -v，来确认你运行的 node 是 v8.x 或更高，npm 为 5.x 或更高。 老版本会产生错误。

建议使用nvm来管理 node 和 npm 的多个版本。如果你机器上已经有某些项目运行了 Node.js 和 npm 的其它版本，你就会需要nvm了。

package.json

无论是 npm 还是 yarn，所安装的包都记录在 package.json 文件中。

CLI 的 ng new 命令会给项目创建一个默认的 package.json 文件。 这个 package.json 中带有一些起步包，这些包可以很好地协同，并可用于大量常见的应用场景。

随着应用的成长，你还会往 package.json 中添加更多包，甚至可能会移除一些。

本指南中会集中讲解这些初始包中的重点部分。

dependencies 和 devDependencies

package.json 包括两组包：dependencies 和 devDependencies

dependencies 是运行应用的基础，而 devDependencies 只有在开发应用时才会用到。

Dependencies

应用程序的 package.json 文件中，dependencies 下包括：

• Angular 包：Angular 的核心和可选模块，它们的包名以 @angular/开头。
• 支持包：那些 Angular 应用运行时必需的第三方库。
• 腻子脚本：腻子脚本负责抹平不同浏览器的 JavaScript 实现之间的差异。

Angular 包

@angular/animations：Angular 的动画库，它能让你更容易定义和使用动画效果，比如页面和列表的转场动画。要了解更多，请参见 动画指南。

@angular/common：由 Angular 开发组提供的常用服务、管道和指令。HttpClientModule也在这里，位于'@angular/common/http'子目录下。

@angular/core：本框架的每个应用都需要的关键运行部件。包括元数据装饰器，如 Component 和 Directive、依赖注入以及组件生命周期钩子。

@angular/compiler：Angular 的模板编译器。 它会理解模板，并且把模板转化成代码，以供应用程序运行和渲染。 开发人员通常不会直接跟这个编译器打交道，而是当在浏览器中使用 JIT 编译 时通过 platform-browser-dynamic 间接使用它。

@angular/forms：支持 template-driven 和 reactive forms。

@angular/http：Angular 的老的、很快就会废弃的 HTTP 客户端库。

@angular/platform-browser：与 DOM 和浏览器相关的每样东西，特别是帮助往 DOM 中渲染的那部分。 这个包还包含 bootstrapStatic 方法，用来引导那些在产品构建时要用 AOT 进行编译的应用程序。

@angular/platform-browser-dynamic： 为应用程序提供一些提供商和方法，以便在客户端使用 JIT 编译器运行本应用。

@angular/router: router 模块 可以在浏览器的 URL 变化时在应用的页面之间导航。

@angular/upgrade: 一组用来把 AngularJS 应用升级到 Angular 的工具。

腻子脚本包

很多浏览器欠缺对 Angular 所需的某些最新 HTML 标准、特性的原生支持。 腻子脚本 可以模拟这些缺失的特性。 浏览器支持一章中解释了哪些浏览器分别需要哪些腻子脚本，以及如何添加它们。

默认的 package.json 会安装 core-js 包，它会弥补很多常用浏览器缺失的特性。

支持包

rxjs：很多 Angular API 都会返回可观察对象（Observable）。RxJS 是个对Observables 规范的当前实现。TC39委员会将来会决定它是否成为 JavaScript 语言标准的一部分。

zone.js：Angular 依赖 zone.js，以便在原生 JavaScript 操作触发事件时运行 Angular 的变更检测过程。Zone.js 是对 这个规范 的当前实现。TC39委员会将来会决定它是否成为 JavaScript 语言标准的一部分。

DevDependencies

package.json 的 devDependencies 区列出的这些包可以帮助你在本机开发应用。

你不必在生产环境的应用中部署它们，当然，就算部署了也没什么坏处。

@angular/cli：Angular 的命令行工具。

@angular/compiler-cli：Angular 的编译器，它会被 Angular CLI 的 build 和 serve 命令调用。

@angular/language-service：Angular 的语言服务会分析组件模板，并且提供类型信息和错误信息，那些支持 TypeScript 的编辑机器可以使用它们来提升开发体验。比如这个：VS Code 的 Angular 语言服务扩展包

@types/... ：第三方库（比如 Jasmine 和 Node.js）的 TypeScript 类型定义文件。

codelyzer：专用于 Angular 应用的 linter，它的规则适用于 Angular 的风格指南。

jasmine/... ：Jasmine 测试库的支持包。

karma/... ：karma 测试运行器的支持包。

protractor：适用于 Angular 应用的端到端（e2e）框架。基于 WebDriverJS 构建。

ts-node：TypeScript 的运行环境以及在 Node.js 环境下用的 REPL。

tslint：一个静态分析器，用来检查 TypeScript 代码的可读性、可维护性和功能方面的错误。

typescript：TypeScript 语言服务，包括 TypeScript 编译器 tsc。

那么多包！那么多文件！

默认的 package.json 所安装的包比项目实际需要的多。

某个指定的包可能包含十个、上百个甚至上千个文件，它们都位于本机的 node_modules 目录下。简直令人生畏。

你可以移除这些不需要的包，不过你怎么知道哪些是不需要的呢？ 实际上，安装不需要的包好过担心缺少某个包。 在你本机开发环境下存在无用的包和文件并没有害处。

默认情况下，Angular CLI 的构建过程只会把应用程序中实际用到的那些第三方库文件打包到结果中。 浏览器要下载的是这个包，而不是原始的包文件。

参见部署一章了解详情。