【问题标题】：Add Angular Material to a custom library将 Angular 材质添加到自定义库
【发布时间】：2019-04-20 21:47:23
【问题描述】：

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

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

如何将 Angular 材质添加到我的库中？我想用这样的东西：

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

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

【问题讨论】：

标签： angular angular-material angular-library

【解决方案1】：

自 Angular 7...

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

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

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

那么这到底有什么变化呢？这“大部分”是我们一直在做的事情。

请记住，您需要将外部原理图/库添加到您的沙盒项目，而不是您的工作区。在 ng6 中，我相信情况并非如此，与 ng6 一样，您同时创建了一个工作区和项目，然后您必须做一些重命名魔法。使用 ng7，您使用设置为 false 的 --create-application 标志，然后创建您的沙盒/开发项目。也就是说，当您使用ng add 为沙盒项目添加外部库/原理图（如角度材料）时，您将使用--project= 标志和ng add 命令。现在我们已经 [over] 解释了所有内容，让我们来看看这些步骤。

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

出于演示目的，我们将此库称为“演示库”，我的存储库将命名为“演示工作区”

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

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

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

完成后，您可以运行ng build 命令来重建您的演示库项目，从而在您的工作区项目中创建一个新的“dist/”文件夹，这也会触发您当前提供的“演示” -sandbox 的项目来重建自己。

【讨论】：

fwiw，我的同事说这对于堆栈溢出答案来说太过分了，我应该创建一篇文章并将其发布在某个地方。 IMO，没有人会找到我的文章，但他们会找到这个 SO 问题，所以虽然它很啰嗦，但至少它是你需要的答案。编码愉快！
我同意你同事的观点。 SO 的答案非常简洁，可以处理所问的确切问题，这就是他为什么会遇到那个特定错误的原因。您的答案是关于克隆 GIT 存储库、生成 Angular 项目（很好地解释每一步）和添加材料的完整教程。因此，虽然这很有帮助，但这意味着提问者需要弄清楚哪个位与他们的问题相关并丢弃其余部分，否则他们需要废弃他们的项目（在这种情况下无论如何都是新的，但对于其他人来说可能不是be) 并使用您的指南重新开始。
@anothercoder 非常感谢您提供本指南。一个问题：如何安装和使用“demo-sandbox”中的“demo-library”？只用npm i @namespace/package-name --save安装是否正确
@AlessandroSantamaria 不需要 NPM 和工作空间策略。只需执行以下操作... 1. 运行您的 lib 的构建，使其出现在您的 /dist 文件夹中 - 您的应用程序将在 ng serve 期间从此处拉取，并在 ng build 期间从此处导入。 2. 将你库的模块导入到你要使用的app模块中，然后像往常一样将你要使用的lib中的组件导入即可。我没有注意到这个通知，所以如果这个答案太迟而对你没有帮助，我很抱歉，我很抱歉。

【解决方案2】：

你不需要在那里添加它。

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

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 并使其与您的库一起自动安装，但这不是管理前端依赖项的好方法（但对于纯节点仍然有用.js 包）

【讨论】：

我还需要将@angular/cdk和hammerjs添加到peerDependencies吗？
仅当您的库依赖于它们时
这对我不起作用。当我向表单添加复选框时，我仍然 mat-checkbox' 不是已知元素。我需要在其他地方添加参考吗？
@Sun 您可能没有将 MatCheckboxModule 包含到组件的模块中？
@smnbbrv 我确实添加了它，但仍然是同样的错误。我该怎么办？