Angular 使用已发布的库

安装库

这些库都是作为 npm 包发布的，它们通常都带有一些与 Angular CLI 集成好的原理图。要把可复用的库代码集成到应用中，你需要安装该软件包并在使用时导入它提供的功能。对于大多数已发布的 Angular 库，你可以使用 Angular CLI 的 ​ng add <lib_name>​ 命令。

Angular CLI 的 ​ng add​ 命令使用包管理器来安装库包，并调用该包中的原理图在项目代码中的添加脚手架。这些包管理器包括 npm 或 yarn。项目代码中的额外脚手架包括 import 语句、fonts 和 themes。

已发布的库通常会提供一个 ​README ​文件或其它文档来介绍如何把该库添加到你的应用中。例子可参阅 Angular Material 文档。

库的类型信息

通常，库包中会在 ​.d.ts​ 文件中包含类型信息。参阅 ​node_modules/@angular/material​ 中的例子。如果库包中没有包含类型信息并且你的 IDE 报错，你可能需要安装与该库关联的 ​@types/<lib_name>​ 包。

比如，假设你有一个名为 ​d3 ​的库：

npm install d3 --save
npm install @types/d3 --save-dev

已安装到工作区中的 ​@types/​ 包中所定义的类型，会自动添加到使用该库的项目的 TypeScript 配置文件中。TypeScript 默认就会在 ​node_modules/@types​ 文件夹中查找类型，所以你不必单独添加每一个类型包。

如果某个库没有 ​@types/​ 类型信息，你仍然可以手动为它添加一些类型信息。为此你要：

1. 在 ​src/​ 文件夹中创建一个 ​typings.d.ts​ 文件。该文件会自动包含在全局类型定义中。
2. 在 ​src/typings.d.ts​ 中添加如下代码。

declare module 'host' {
  export interface Host {
    protocol?: string;
    hostname?: string;
    pathname?: string;
  }
  export function parse(url: string, queryString?: string): Host;
}

3. 在使用该库的组件或文件中，添加如下代码。

import * as host from 'host';
const parsedUrl = host.parse('https://angular.io');
console.log(parsedUrl.hostname);

按需定义更多类型。

更新这些库

库的发布者可以对这些库进行更新，而这些库也有自己的依赖，所有依赖都需要保持最新。要检查已安装库的更新，请使用 ​ng update​ 命令。

使用 ​ng update <lib_name>​ 命令来单独更新某个库的版本。Angular CLI 会检查库中最新发布的版本，如果最新版本比你已安装的版本新，就会下载它并更新你的 ​package.json​ 以匹配最新版本。

如果要把 Angular 更新到新版本，你需要确保所用的库都是最新的。如果库之间相互依赖，你可能还要按特定的顺序更新它们。请参阅 Angular 升级指南以获取帮助。

把某个库添加到运行时的全局范围中

如果未将老式 JavaScript 库导入应用程序，你可以将其添加到运行时全局范围并加载它，就像将其添加到 script 标记中一样。使用工作区构建配置文件 ​angular.json​ 中此构建目标的 ​scripts ​和 ​styles ​选项，配置 Angular CLI 以便在构建时执行此操作。

比如，要使用 Bootstrap 4 库

1. 使用 npm 包管理器安装库和相关的依赖项：

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

2. 在 ​angular.json​ 配置文件中，把关联的脚本文件添加到 "scripts" 数组中：

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],

3. 把 ​bootstrap.css​ 文件添加到 "styles" 数组中：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],

4. 运行或重启 ​ng serve​，看看你的应用是否正在使用 Bootstrap 4。

在你的应用中使用运行时全局库

通过 “scripts” 数组导入某个库之后，不要在 TypeScript 代码中再次使用 import 语句导入它。以下代码片段是一个示例导入语句。

import * as $ from 'jquery';

如果你使用 import 语句导入它，你将拥有该库的两个不同副本：一个作为全局库导入，另一个作为模块导入。这对于带有插件的库来说尤其糟糕，比如 JQuery，因为每个副本都包含不同的插件。

相反，运行 ​npm install @types/jquery​ Angular CLI 命令为你的库下载类型信息，然后按照库的安装步骤进行操作。这样你就可以访问该库公开的全局变量了。

定义运行时全局库的类型信息

如果你要用的全局库没有全局类型信息，就可以在 ​src/typings.d.ts​ 中手动声明它们。

比如：

declare var libraryName: any;

有些脚本扩展了其它库，比如 JQuery 插件：

$('.test').myPlugin();

在这种情况下，所安装的 ​@types/jquery​ 就不包含 ​myPlugin​，所以你需要在 ​src/typings.d.ts​ 中添加一个接口。比如：

interface JQuery {
  myPlugin(options?: any): any;
}

如果不为这个由脚本定义的扩展添加接口，IDE 就会显示错误：

[TS][Error] Property 'myPlugin' does not exist on type 'JQuery'