原文

Use cases for Angular libraries

Angular 库有 2 个常见用例：

构建可重用的组件库以在应用程序之间共享。
构建共享服务层功能 - 例如。用于处理外部数据源（例如 API）的客户端。

虽然有很多 Angular 库非常适合项目的情况，但值得考虑您的用例是否属于这些，因为它确实引入了一些维护开销。请记住，您始终可以将功能编写为应用程序中共享 Angular 模块的一部分，并在必要时将其提取到库中。

Creating an Angular library project

我们将创建一个 Angular 库，以及一个使用该库的演示应用程序。我们可以使用以下命令创建这些：

ng new example-component-library --create-application=false
cd example-component-library
ng generate library example-component-library
ng generate application example-component-library-app

使用 --create-application=false 标志可以防止 Angular 创建名为“example-component-library”的应用程序，这是我们想要给库本身而不是测试应用程序的名称。

如果我们现在查看刚刚创建的工作区内部，我们可以看到有一个项目文件夹，其中包含每个库（example-component-library）和应用程序（example-component-library-app）的子文件夹我们刚刚生成的。还有一个包含 e2e 测试项目的第三个文件夹，我们可以忽略它。

使用下面的命令行单独 build library：

ng build --project=example-component-library

如果我们查看 dist 文件夹，我们将看到我们的库已经构建，并且在 build 文件夹中，我们有许多不同的文件夹，其中包含适用于不同消费者的各种不同模块格式的应用程序，以及一个包含 TypeScript 定义。

bundles - UMD 模块格式。
esm5 - 主要使用 es5 的模块格式，但也使用来自 es6 的导入/导出语法。
esm2015 - 使用 es2015/es6 的模块格式。
fesm5 - esm5 的扁平化版本。
fesm2015 -peerDependencies esm2015 的扁平化版本。
lib - 库的 TypeScript 定义。

这种格式称为 Angular Package Format，它是用作 ng-packagr 输出的格式，ng-packagr 是 Angular CLI 用来编译库的工具。

库文件的项目结构：

首先，删除现有的 example-component-library 模块、组件和服务文件——我们不需要这些。

接下来我们将添加一个组件、一个管道和一个指令。我们将遵循一种为每个模块添加一个组件的模式——这将允许消费应用程序仅导入它感兴趣的库模块，然后在构建过程中对所有其他模块进行 tree shaken. 我强烈建议这样做，因为随着库的增长，它确实会对应用程序包的大小产生影响。

ng generate module components/foo
ng generate component components/foo
ng generate module pipes/bar
ng generate pipe pipes/bar/bar
ng generate module directives/baz
ng generate directive directives/baz/baz

现在的项目结构：

最佳实践：

每个模块有一个组件，以允许对未使用的模块/组件进行 tree shake 优化。

例外情况是始终一起使用的组件应保存在同一模块中 - 例如。如果您正在实现选项卡，则 TabGroupComponent 和 TabItemComponent 将位于同一模块中。

接下来，我们必须将我们创建的每个组件添加到其模块的导出中：

我们现在更新 public_api.ts 以导出库中我们希望公开给消费应用程序的任何文件：

现在我们要做的就是重新构建，它就可以从应用程序中使用库了。

Consuming our Angular library

开发环境

在开发过程中，使用我们库的最佳方式是使用 npm link。这将允许我们从消费应用程序的节点模块文件夹中的目录符号链接到库的 dist 文件夹中的已编译应用程序。

cd dist/example-component-library
npm link

我们可以从本地机器上的任何地方将一个 Angular 项目链接到这个库。从项目根文件夹：

npm link example-component-library

如果我们现在使用 watch 标志运行库，同时在另一个终端窗口中运行 ng serve。

ng build --project=example-component-library
ng serve

这将允许我们同时开发应用程序和（一个或多个）链接库，并看到应用程序在每次修改库源代码时重新编译。

生产环境

对于生产环境，我们将我们的库发布到 npm，然后使用 npm install 将其安装到应用程序中。

首先，您需要创建一个 npm 帐户。现在从命令行登录：

npm login

From the project root folder:

cd dist/example-component-library
npm publish

我们的包现在发布在 npm（公开）上，我们可以通过将它添加到我们的应用程序的 package.json 依赖项并运行 npm install 来安装它：

"dependencies": {..."example-component-library": "~0.0.1"
}

更多Jerry的原创文章，尽在：“汪子熙”:

Angular library 学习笔记相关推荐

Angular 4 学习笔记1
文章目录一张图说明Angular程序架构 Angular开发环境搭建项目文件夹和各部分关系引入npm命令安装的外部模板使用指令生成组件启动项目指令数据绑定将css类绑定到html标签上 ...
Angular入门学习笔记
Angualr入门扫盲必备声明:这篇是我学习angualr的笔记,可以转载,但必须注明来源作者 kone 并附上本文链接 A:环境,工具 1:先确保安装了nodejs和npm Nodejs npm ...
Angular 4 学习笔记从入门到实战打造在线竞拍网站基础知识快速入门个人感悟
最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 先上个效果图: 环境&版本信息声明运行ng -v @ ...
为什么选择angular？-学习笔记
使用angular的原因: Angular是一款优秀的前端JS框架,已经被用于Google的多款产品当中. 它有一下的特性: 良好的应用程序结构: 双向数据绑定: 指令: HTML模版: 可嵌入,注入 ...
PBC library 学习笔记（三）
继续学习PBC库中的函数等相关知识 1.pairing function 一个应用在使用之前要先初始化pairing 对象,设置曲线.群以及其他数学概念.然后其他的elements才能被设置初始化,并 ...
3、Angular JS 学习笔记 – Controllers [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 理解控制器在Angular中,一个控制器是一个javascript构造函数用于填充Angular作用域. 当一个控制器通过使 ...
4、Angular JS 学习笔记 – 创建自定义指令 [翻译中]
2019独角兽企业重金招聘Python工程师标准>>> 创建自定义指令注意:本指南是针对已经熟悉AngularJS基础的开发者.如果您只是想要开始,建议您先去看教程.如果你在寻找指 ...
Angular Universal 学习笔记
如果配置得当,我们可以将所有的内容都在服务器端渲染,避免在浏览器端再次调用 API. 首先命令行安装 Angular Universal: ng add @nguniversal/express-en ...
Angular Schematics 学习笔记
网址:https://angular.io/guide/schematics A schematic is a template-based code generator that supports ...

Angular library 学习笔记