在 Angular 开发中，我们通常会使用一些第三方库来提高开发效率和功能性。这些第三方库通常以模块的形式提供，我们需要将它们引入到我们的项目中。在 Angular CLI 中，我们有多种方式可以引入外部模块，本文将对这些方式进行总结和介绍。
npm 安装
npm 是 Node.js 的包管理工具，我们可以通过 npm 安装第三方库。在 Angular CLI 项目中，我们可以通过以下命令来安装外部模块：
--- ------- ------------- ------
其中，<module_name> 是我们需要安装的模块名称。--save 参数会将模块名称和版本号添加到项目的 package.json 文件中，以便于管理和维护。
安装完成后，我们可以在 node_modules 目录中找到安装的模块。在需要使用该模块的组件中，我们可以通过以下方式引入该模块：
------ - ---------- - ---- --------------
其中，ModuleName 是我们需要引入的模块名称，module_name 是我们安装的模块名称。
CDN 引入
CDN 是一种通过网络分发内容的技术，我们可以通过 CDN 引入外部模块。在 Angular CLI 项目中，我们可以在 index.html 文件中添加以下代码来引入外部模块：
------- ------------------------------------------------------
其中，https://cdn.example.com/module_name.js 是我们需要引入的模块的 CDN 地址。
引入完成后，我们可以在组件中直接使用该模块提供的全局变量或函数。
Angular CLI 的 Assets
在 Angular CLI 项目中，我们可以通过 angular.json 文件来配置项目的 Assets。Assets 是指项目中需要被打包的文件或目录。我们可以将外部模块添加到 Assets 中，使其被打包到项目中。
在 angular.json 文件中，我们可以找到 assets 属性，我们可以在其中添加需要打包的文件或目录。例如，我们需要打包一个名为 module_name 的模块，我们可以在 assets 属性中添加以下配置：
--------- -
-------------
------------------
-
------- -------
-------- -----------------------------
--------- ----------------------
-
-其中，glob 表示需要匹配的文件或目录，input 表示需要打包的模块路径，output 表示打包后的模块路径。
添加完成后，我们可以在组件中通过以下方式引入该模块：
------ - ---------- - ---- ---------------------
其中，ModuleName 是我们需要引入的模块名称。
总结
本文介绍了在 Angular CLI 项目中引入外部模块的三种方式：npm 安装、CDN 引入和 Angular CLI 的 Assets。不同的方式适用于不同的场景，我们可以根据具体情况选择合适的方式。通过本文的学习，相信读者已经掌握了引入外部模块的方法，并可以在实际项目中灵活应用。
示例代码
本文的示例代码可以在 GitHub 上获取。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65cd9806add4f0e0ff6cd119