使用已发布的库
当构建 Angular 应用时，你可以从精致的第一方库，比如 Angular Material ，以及丰富的第三方库生态系统中获益。参见 Angular 资源集页面，了解最常用的库链接。
安装库
这些库都是作为 npm 包发布的，它们通常都带有一些与 Angular CLI 集成好的 schematic。要把可复用的库代码集成到应用中，你需要安装该软件包并在使用时导入它提供的功能。对于大多数已发布的 Angular 库，你可以使用 Angular CLI 的 ng add <lib_name> 命令。
ng add 命令使用 npm 包管理器或 yarn 来安装库包，并调用该包中的 schematic 在项目代码中的添加脚手架，比如添加 import 语句、添加 fonts，添加 themes 等。
已发布的库通常会提供 README 或者其它文档来介绍如何把该库添加到你的应用中。例子可参见 Angular Material 文档。
库的类型
库包中通常会在 .d.ts 文件中包含类型信息。参见 node_modules/@angular/material 中的例子。如果你的库包中没有包含类型信息并且你的 IDE 报错，你可能需要安装与这个库关联的 @types/<lib_name>包。
比如，假设你有一个名为 d3 的库：
content_copynpm install d3 --save
npm install @types/d3 --save-dev
已安装到工作区中的 @types/ 包中所定义的类型，会自动添加到使用该库的项目的 TypeScript 配置文件中。TypeScript 默认就会在 node_modules/@types 文件夹中查找类型，所以你不必单独添加每一个类型包。
如果某个库没有 @types/ 类型信息，你仍然可以手动为它添加一些类型信息。为此你要：
-
在
src/文件夹中创建一个typings.d.ts文件。该文件会自动包含在全局类型定义中。 -
在
src/typings.d.ts中添加如下代码。
content_copydeclare module 'host' {
export interface Host {
protocol?: string;
hostname?: string;
pathname?: string;
}
export function parse(url: string, queryString?: string): Host;
}
-
在使用该库的组件或文件中，添加如下代码。
content_copyimport * 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 标签中一样加载。可以在 CLI 配置文件 angular.json 中的构建目标（build target）的 "scripts" 和 "styles" 选项中配置 CLI，以便在构建期间添加这些文件。
例如，要使用 Bootstrap 4，首先就要使用 npm 包管理器来安装该库及其依赖：
content_copynpm install jquery --save
npm install popper.js --save
npm install bootstrap --save
在 angular.json 配置文件中，把关联的脚本文件添加到 "scripts" 数组中：
content_copy"scripts": [
"node_modules/jquery/dist/jquery.slim.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
],
把 Bootstrap 的 CSS 文件添加到 "styles" 数组中：
content_copy"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
运行或重启 ng serve，看看你的应用是否正在使用 Bootstrap 4。
在你的应用中使用运行时全局库
当你用 "scripts" 数组导入一个库后，就不应该在你的 TypeScript 代码中再用 import 语句来导入它了（比如：import * as $ from 'jquery';）。如果你这样做，就会得到该库两个不同的副本：一个作为全局库导入，另一个作为模块导入。这对于那些带有插件的库来说特别糟糕，比如JQuery，因为每个副本都会有不同的插件。
相反，为你的库下载类型信息（npm install @types/jquery），并按照库的安装步骤进行操作。这让你可以访问该库暴露出来的全局变量。
定义运行时全局库的类型信息
如果你要用的全局库没有全局类型信息，就可以在 src/typings.d.ts 中手动声明它们。例如：
content_copydeclare var libraryName: any;
有些脚本扩展了其他库，例如 JQuery 插件：
content_copy$('.test').myPlugin();
在这种情况下，所安装的 @types/jquery 就不包含 myPlugin，所以你需要在 src/typings.d.ts 中添加一个接口。例如：
content_copyinterface JQuery {
myPlugin(options?: any): any;
}
如果不为这个由脚本定义的扩展添加接口，IDE 就会显示错误：
content_copy[TS][Error] Property 'myPlugin' does not exist on type 'JQuery'
原文地址：https://www.angular.cn/guide/using-libraries#using-published-libraries