Angular13 Angular 使用已发布的库

2024-02-25 开发教程 Angular13 匿名 4℃

安装库

这些库都是作为 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/ 类型信息，你仍然可以手动为它添加一些类型信息。为此你要：

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

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

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

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库

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

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

在 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"
],

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

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

运行或重启 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'

上一节： Angular 库概览

下一节： Angular 创建库

"Angular13"的目录