Angular 6引入后，Angular团队之一的非常容易的事情就是创建Angular库。如果你以前尝试过，你就知道这几乎不是一项简单的任务...。

现在该过程是什么样子的呢？让我们遵循一个典型的场景：我们将创建一个库，该库提供服务、组件和一些接口。

我们将处理许多人心中的一个话题：电视节目。该库将使用由tvmaze.com api提供的数据，因此我们将命名我们的库为_tvmaze_。

1. 创建库项目

像往常一样，我们通过使用ng new命令生成初始设置：

ng new lib-demo --prefix ld

使用Angular CLI 6版本，配置文件的格式发生了相当大的变化。angular.json现在代表所谓的工作区，可能具有多个项目。默认情况下，我们为我们生成了lib-demo和lib-demo-e2e项目，但是你可以使用"ng generate application [my-app-name]"命令添加更多项目。

你还可以生成库而不是应用程序：

ng generate library tvmaze --prefix tm

至于此命令的标志，有几个选项，但设置前缀是绝对最少的。如果你不选择前缀，它将默认为“lib-”。

generate命令对我们的应用程序进行了几个更改：

最值得注意的是，新的projects目录被创建，并在其中包含tvmaze文件夹。这个新的_project_也在我们的angular.json配置中引用。

2. 定义和提供一些接口

API请求将如下所示：https://api.tvmaze.com/shows/336。如果你跟随链接，你会注意到返回的json非常复杂-定义一组可重复使用的接口并将其提供给我们的库的用户是个好主意。你可以使用一个奇妙的jsontots.com工具来执行前者：

只需将api的响应复制粘贴到jsontots.com网站上的字段中，即可完成！你有了接口！顺便说一句，有关更多类似的提示，请关注我的@sulco twitter账户:-)

让我们创建一个projects/tvmaze/src/lib/tvmaze.models.ts文件，其中包含所有接口。这里有一堆它们，它们都非常密切相关，因此为每个接口创建单独的文件实际上没有意义。

为了让使用此库的开发人员能够访问我们的接口，我们需要将它们提供为tvmaze库的公共api。编辑第一步中生成的projects/tvmaze/src/public_api.ts文件，使其如下所示：

3. 在库中创建服务

我们新创建的tvmaze有自己的package.json、tsconfig.json、tslint.json和karma.conf.js，因为它可能需要不同的设置，而不是主应用程序。它还为我们生成了一个示例组件、模块和服务。我们也可以添加其他服务，稍后再做。

现在让我们向projects/tvmaze/src/lib/tvmaze.service.ts添加一些逻辑：

在这个服务中，除了@Injectable装饰器中的provideIn: root配置之外，没有什么异常。实际上，它是Angular 6中添加的新设置。

"provideIn: root"允许在任何NgModule中显式注册服务。

这有什么用？它使这种服务能够被剪裁（如果未使用，则从生产包中删除），这是在库中定义的服务的常见情况。

4. 在库中创建组件

我们的库将允许显示给定节目的海报。与典型的Angular项目一样，你不必手动创建组件-这就是CLI的作用：

ng generate component poster --project=tvmaze

我们只需要告诉CLI在我们的_tvmaze_库中创建海报即可。

为了使组件在lib的tvmaze.module之外可用，我们需要将其添加到exports部分。确保你的projects/tvmaze/src/lib/tvmaze.module.ts看起来像这样：

我还添加了HttpClientModule依赖项，因为我们需要在TvMazeService中使用HttpClient，并且CommonModule因为它是定义async管道和ngIf指令（海报组件使用）的位置。# 5. 开始构建

在使用我们的库之前，我们需要先构建它。同样，Angular CLI可以帮助我们完成这个任务。我们现在可以告诉它来构建一个特定的项目：

ng build tvmaze

6. 使用库

要试用我们的库，我们需要像使用第三方扩展一样，在应用程序的NgModule的imports部分中将其定义为依赖项：

需要注意的是，我们不是通过相对路径来导入tvmaze目录下的类，而是像它已经在node_modules中一样导入。它真的在那里吗？没有。

那么这是如何工作的呢？

当我们生成库（ng generate library tvmaze）时，Angular CLI会通过将tvmaze添加到paths条目中修改我们项目根目录下的tsconfig.json文件。

这意味着，每当你在TypeScript代码中从“tvmaze”导入某些内容时，它实际上是从dist/tvmaze目录中导入的，而该目录中保存了我们库的构建。

这非常方便，因为一旦你将库发布到实际的npm存储库并希望开始使用该版本，你就不必更改应用程序源中的任何导入-只需删除该paths条目即可。

现在让我们来显示一些内容。

让我们将默认的src/app/app.component.ts修改为如下所示：

这里我们使用了我们的tvmaze服务提供的所有内容：Show接口、TvmazeService和<tm-poster>。一旦我们启动应用程序，这应该是一个结果：

7. 发布库

要使库在npm上可用，你只需要创建一个生产版本，然后从项目的dist目录中运行npm publish命令：

ng build tvmaze --prod
cd dist/tvmaze
npm publish

如果你以前没有发布过任何东西，你需要先创建一个npm帐户并登录（在文档中查看详细信息），但除此之外...就是这样了:-)

结语

本指南未涵盖的是测试-这本身就是一个单独的主题，但除了运行ng test命令之外，你还需要运行ng test tvmaze命令，这与测试任何其他Angular应用程序相同。

当前设置中缺少完美的一点是更好的自动化：现在，每当你想要在应用程序中查看你在库中引入的更改时，你都需要重新构建库，并经常重启主应用程序的服务器。Angular团队正在努力使这个过程更加流畅，但与此同时，我建议你制作一个脚本，并在你的IDE中为它分配一个快捷键（例如使用Visual Studio Code的tasks）。这就是我正在做的。

话虽如此，当前的过程已经是如此的出色的开发体验，我只等着在整个生态系统中涌现出一堆新的库:-)

顺便说一句，你可以在GitHub上查看本文中使用的完整代码。并确保你阅读了CLI存储库中的维基条目以获取其他信息，例如某些架构选择背后的原因。

你学到了新东西吗？如果是，请：

→ 在下面的拍手👏按钮上点击一下，这样更多的人就能看到这篇文章了→ 关注我Twitter(@sulco)，这样你就不会错过未来的文章了！

Tomek Sułkowski (@sulco) | Twitter

译自：https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11