Angular 库

Angular 库是作为通用问题的解决方案而构建的，例如呈现统一的用户界面、呈现数据和允许数据输入。开发人员可以为特定领域创建通用解决方案，这些解决方案可以进行调整以在不同的应用程序中重复使用。这些解决方案可以构建为 Angular 库，并且这些库可以作为 npm 包发布和共享。

Angular 库是一个 Angular 项目，但它与 Angular 应用程序的不同之处在于它不能自行运行。它被导入并在应用程序中使用。

Angular 库的用法

• Angular 库扩展了 Angular 的基本功能。例如，如果要将反应式表单添加到应用程序，请使用 ng add @angular/forms 添加库包，然后在应用程序代码中从 @angular/forms 库导入 ReactiveFormsModule。
• Angular Material 是一个大型通用库的示例，它提供了复杂、可重用和可适应的 UI 组件。

安装库

库以 npm 包的形式发布，并与 Angular CLI 集成。要将可重用的库代码集成到应用程序中，我们必须安装该包并在我们将使用它的地方导入提供的功能。

语法

ng add 命令使用 npm 包管理器来安装库包，并调用包含在该包中的 schematics 以在项目代码中进行其他 scaffolding，例如添加 import 语句、字体、主题等。

库类型定义

库包在 .d.ts 文件中包含类型定义。如果您的库包不包含类型定义并且 IDE 显示错误，则必须安装库的关联 @types/包。

例如，假设您有一个名为 d1 的库

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

如果库在 @types/ 中不包含类型定义，您仍然可以通过手动为其添加类型定义来使用它。您可以按照以下步骤操作

在您的 src/ 文件夹中创建一个 typings.d.ts 文件。此文件会自动作为全局类型定义包含在内。

在 src/typings.d.ts 中添加以下代码。

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

更新库

您可以使用 ng update 命令更新库。它更新单个库版本。Angular CLI 检查库的最新发布版本，如果发现最新版本比您安装的版本新，则会下载该版本并更新您的 package.json 以匹配最新版本。

语法

注意：当您将 Angular 更新到新版本时，必须确保您正在使用的任何库都是最新的。如果库有相互依赖性，它们也必须更新。

如何将库添加到运行时全局范围

未导入到应用程序中的旧版 JavaScript 库可以添加到运行时全局范围，并像在 script 标签中一样加载。您必须配置 CLI 在构建时使用 CLI 配置文件 angular.json 中构建目标的“scripts”和“styles”选项来执行此操作。

例如，要使用 Bootstrap 4 库，首先使用 npm 包管理器安装该库及其依赖项

将 Bootstrap CSS 文件添加到“styles”数组

创建新库

您可以创建和发布自己的新库来扩展 Angular 功能。当您需要在多个应用程序中解决相同的问题（或者想与其他开发人员分享您的解决方案）时，通常会使用它，您有一个库的候选对象。

例如： 您可以创建一个将用户发送到您公司网站的按钮，该按钮将包含在您公司构建的所有应用程序中。

打开 Angular CLI 并使用以下语法创建一个新库。

语法

这将在您的工作区中创建一个 projects/my-lib 文件夹，其中包含一个组件和一个 NgModule 中的服务。工作区配置文件 angular.json 已使用类型为“library”的项目更新。

现在，您可以使用以下命令构建、测试和 lint 您的项目