Angular 是一个流行的前端框架，它使用 TypeScript 编写，并提供了很多内置的组件和功能。但有时候需要使用第三方库来扩展 Angular 的功能。本文将介绍如何在 Angular 中包含第三方库，重点介绍两种方法：手动添加和通过 npm 安装。
手动添加第三方库
首先，需要将第三方库的 JavaScript 文件下载到本地，并将其文件放置在项目的某个目录中。通常可以将这些文件放置在 src/assets/js 目录下。例如，我们想要使用 jQuery，可以从官网上下载它的 JavaScript 文件，然后将它复制到这个目录下。
接下来需要在 angular.json 文件中的 scripts 属性中将这些文件添加进去。示例：
---------- - ------------------------- -
在项目中使用这些库的方式与普通的 JavaScript 文件一样，例如：
------- -----------------------------------
通过 npm 安装第三方库
除了手动添加第三方库，还可以通过 npm 安装来引入第三方库。npm 是一个 Node.js 包管理器，它可以帮助我们下载和管理第三方库。
首先，需要打开终端并进入项目的根目录，执行以下命令安装要使用的库（例如，安装 Moment.js）：
--- ------- ------ ------
--save 表示将这个库添加到项目的 package.json 文件的 dependencies 中，以便在其他机器上重新安装时能够正确地安装这个依赖项。如果不加这个参数，只会将库安装到项目中，但在重新安装时可能会遗漏这个库。
安装完成后，在使用这个库之前，需要在组件或者模块中引入这个库。例如，在组件中使用 Moment.js：
------ - -- ------ ---- ---------
------------
--------- -------------------
--------- -
---------- ---- -- -- ----------- ------
--
--
------ ----- ----------- -
------ ------------ -------
------------- -
---------------- - --------------------- -- ----- ------- ----
-
-这里使用 import * as moment from 'moment' 来引入 Moment.js。这是因为 Moment.js 本质上是一个 JavaScript 对象，而不是一个类，使用命名导入语法可以更好地管理它。如果使用默认导入 import moment from 'moment'，则无法使用 Moment.js 中的所有方法，但仍然可以使用 moment() 方法来获取当前时间。
总结
两种方式都可以将第三方库引入到 Angular 项目中。手动复制文件和添加到 angular.json 很容易，但使用 npm 更加方便和可维护，因为它可以自动更新依赖项。在使用时，需要注意如何正确地引入库，以便能够使用它们的所有功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6495352248841e98942764bd