angular 7库 angular7库|Angular7教程

本文概述

Angular库的用法
安装库
库打字
更新库
如何将库添加到运行时全局范围
创建新库

建立Angular库是为了解决一般问题，例如呈现统一的用户界面，呈现数据和允许数据输入。开发人员可以为特定领域创建通用解决方案，以适合在不同应用程序中重复使用。这些解决方案可以作为Angular库构建，并且这些库可以作为npm软件包发布和共享。
Angular库是一个有角度的项目，但与Angular应用不同之处在于它不能单独运行。它已导入并在应用程序中使用。
Angular库的用法

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

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

ng add < lib_name>

ng add命令使用npm软件包管理器安装库软件包，并将包含在软件包中的示意图调用到项目代码中的其他支架上，例如添加导入语句，字体，主题等。
图书馆打字库软件包包括在.d.ts文件中的键入。如果你的库软件包不包含键入内容，并且IDE显示错误，则必须安装库的关联@ types /软件包。
例如，假设你有一个名为d1的库：

npm install d1 --save npm install @types/d1 --save-dev

【angular 7库】在@ types /包中为安装在工作区中的库定义的类型会自动添加到使用该库的项目的TypeScript配置中。默认情况下，TypeScript在node_modules / @ types文件夹中查找类型，因此你不必单独添加每个类型包。
如果库在@ types /中不包含类型，你仍然可以通过手动为其添加类型来使用它。你可以执行以下操作：
在src /文件夹中创建一个Types.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命令来更新库。它更新单个库的版本。 Angular CLI检查该库的最新发布版本，如果发现最新版本比你安装的版本新，请下载它并更新你的package.json以匹配最新版本。
句法

ng update < lib_name>

注意：将Angular更新到新版本时，必须确保使用的所有库都是最新的。如果库具有相互依赖性，则还必须对其进行更新。如何将库添加到运行时全局范围可以将未导入到应用程序中的旧版JavaScript库添加到运行时全局范围，并像在script标记中一样加载它们。你必须使用CLI配置文件angular.json中构建目标的“脚本”和“样式”选项来配置CLI以在构建时执行此操作。
例如，要使用Bootstrap 4库，请首先使用npm软件包管理器安装该库及其依赖项：

npm install bootstrap --save

将Bootstrap CSS文件添加到“样式”数组中：

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

创建新库你可以创建和发布自己的新库来扩展Angular功能。它通常用于需要在多个应用程序中解决同一问题（或希望与其他开发人员共享你的解决方案）且有库候选人的情况下使用。
例如：你可以创建一个按钮，将用户发送到公司网站，该按钮将包含在公司构建的所有应用程序中。
打开Angular CLI并使用以下语法创建新库。
句法

ng generate library my-lib

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

"projects": { ... "my-lib": { "root": "projects/my-lib", "sourceRoot": "projects/my-lib/src", "projectType": "library", "prefix": "lib", "architect": { "build": { "builder": "@angular-devkit/build-ng-packagr:build", ...

现在，你可以使用以下命令来构建，测试和整理项目：