将 Angular Material 添加到自定义库

Question

我想编写自己的库并在其他项目中重用它，所以我创建了一个新应用并在那里生成了一个库：

ng new lib-collection
cd lib-collection
ng g library first-lib --prefix va

如何将 Angular Material 添加到我的图书馆？我想使用这样的东西：

ng add @angular/material --project=first-lib

但是我得到一个错误：Could not find the project main file inside of the workspace config (projects/first-lib/src)。怎么了？

Answer 1

你不需要在那里添加它。

您需要将其添加到您的主要应用程序中：

ng add @angular/material

然后将“@angular/material”添加到 projects/first-lib/src/package.json 的 peerDependencies（只需从主 package.json 中复制带有 @angular/material 的一行）。

你刚刚做了什么：

您将库安装到主 package.json，现在可以在本地运行您的代码，因为本地 angular cli 将使用主 package.json 和 node_modules
你将它设置为库的依赖项，在你发布它并在另一个地方安装后，它会要求你也在那里安装 peerDependencies（作为 npm 警告）

当然，您也可以将它添加到 dependencies 而不是 peerDependencies 并自动将其与您的库一起安装，但这不是管理前端依赖项的好方法（但可以仍然适合纯 node.js 包）

Answer 2

自 Angular 7...

从ng7和ng CLI 7开始，我们可以按照Angular库开发的首选方法如下

创建工作区并利用设置为 false 的 --create-application 标志。
在您的工作区中创建您的图书馆。
在您的工作区中创建一个 test/sandbox 项目，以便在开发时测试您的库。
使用 git 子树将您的库构建的 /dist/ 文件夹推送到一个单独的存储库，您可以将其用作分发新库的源（在内部或通过 npm 公开）等）

这会做一些事情。 1. 使您的库和沙箱项目保持独立，并在您的工作区内生成端到端 (e2e) 测试项目。 2. 将所有项目放在一起，但又是独立的。

那么这到底改变了什么？这就是 'mostly' 我们一直以来的工作方式。

请记住，您需要将外部 schematic/library 添加到您的沙盒项目，而不是您的工作区。在 ng6 中，我相信情况并非如此，因为在 ng6 中，您同时创建了一个工作区和项目，然后您必须执行一些重命名魔术。使用 ng7，您可以使用 --create-application 标志设置为 false，然后创建您的 sandbox/dev 项目。也就是说，当您使用 ng add 将外部 library/schematic 添加到您的沙盒项目（如 angular material）时，您将使用 --project= 标志和 ng add 命令。让我们运行完成这些步骤，现在我们已经 [过度] 解释了所有内容。

注意：我总是在我的源 (gitlab/github/bitbucket/etc) 创建我的 repo，然后在做任何事情之前将它克隆到我的本地，我假设你也这样做。

出于演示目的，我们将调用此库 'Demo Library'，我的存储库将命名为 'demo-workspace'

运行 git clone $ssh_url_for_repo_here
CD 到您新克隆的工作区存储库 cd demo-workspace
使用 ng new 在同一目录中创建没有项目的工作区 ng new demo-workspace --directory=./ --create-application=false
- 这将创建一个 angular 工作区。它看起来类似于一个项目，但如果您键入 ng serve
在同一个文件夹（您的工作区存储库的 ROOT）中使用 ng generate demo-library 或 ng g demo-library --prefix=demo 生成您的库，包括所需的前缀）。
- 这将在您的工作区文件夹中创建一个 'projects' 文件夹。它将把你的新图书馆放在你的 'projects' 文件夹中。
然后您将运行 ng build demo-library 到运行您的新库的初始构建，这将在您的工作区的根目录中创建一个 dist 文件夹。
接下来您将创建您的沙箱项目，您将在使用 ng generate 命令和您想要的标志开发和测试您的 angular 库时使用该项目，例如 ng g application demo-sandbox --style=scss --routing=false
- 这将生成一个正常的 angular 项目，按照您的标志说明并将新生成的项目放在您工作区的项目文件夹中 demo-workspace/projects/demo-sandbox
生成项目后，您可以使用标准 ng serve 提供它，它会出现在端口 4200 上，不需要为此包含 --project= 标志，它会假设正确。
现在，您将最终使用 ng add 命令将 Angular Material 原理图添加到您的沙箱项目中，并使用 --project= 标志来确定哪个项目 Angular Material 应该运行在（同样，所有这些都在您的父工作区目录中）ng add @angular/material --project=demo-sandbox
- 您会注意到您的 'demo-sandbox' 实际上没有 package.json，这是因为它利用了工作区中的 package.json。一切都是分开的，但不是真的哈哈。
最后添加 Angular Material 作为对等依赖，正如@smnbbrv 建议的他们的答案...

Then add "@angular/material" to the peerDependencies of the `projects/demo-library/src/package.json (just copy a line with @angular/material from your primary package.json).

我个人添加了 @angular/cdk、@angular/animations 和 hammerjs 依赖项以及 @angular/material。我非常注重明确性，另外你会注意到在 "peerDependencies" 中它明确地同时具有 @angular/common 和 @angular/core，而不是只有一个并假设另一个。

完成后，您可以运行 ng build 命令重建您的 demo-library 项目，从而在您的 'dist/' 文件夹中创建一个新的 'dist/' 文件夹工作区项目，它还会触发您当前服务的 'demo-sandbox' 项目自行重建。

将 Angular Material 添加到自定义库

Add Angular Material to a custom library

angular

angular-material

angular-library

自 Angular 7...