Angular 将角度材质添加到自定义库

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

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

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

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

---

但是我得到了一个错误：

在工作区配置（projects/first lib/src）中找不到项目主文件

。怎么了？

您不需要将其添加到那里

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

ng add @angular/material

然后将“@angular/material”添加到

projects/first lib/src/package.json的
peerDependencies
（只需从主
package.json
复制一行
@angular/material
）

你刚才所做的：

您已将库安装到主
package.json
中，现在可以在本地运行代码，因为本地cli将使用主
package.json
和
node_模块
您将其设置为库的依赖项，在发布并在另一个位置安装后，它将要求您也在那里安装
peerDependencies
（作为npm警告）
当然，您也可以将其添加到
依赖项
而不是
对等依赖项
，并将其与库一起自动安装，但这不是管理前端依赖项的好方法（但对于纯node.js包仍然是好的）
，因为Angular 7。。。
由于ng7和NGCLI7，我们可以遵循以下角度库开发的首选方法

创建工作区并利用设置为false的
--Create application
标志
在工作区内创建库
在工作区内创建一个测试/沙箱项目，以便在开发库时对库进行测试
使用git子树将库构建的
/dist/
文件夹推送到一个单独的repo，您可以将其用作分发新库的源（内部或通过npm公开等）
这可以做一些事情。
1.使库和沙盒项目保持独立，并在工作区内生成端到端（e2e）测试项目。
2.将所有项目保持在一起，但保持独立

那么这到底是什么变化呢？这就是我们一直在做的事情

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

注意：我总是在我的原点（gitlab/github/bitbucket/etc）创建我的回购协议，然后在做任何事情之前将其克隆到我的本地，我假设您也这样做

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

在此处为repo运行git clone$ssh\u url\u
将CD放入新克隆的工作区repo
CD演示工作区
使用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
命令和所需的标志开发和测试angular库时使用该项目，类似于
ng g应用程序演示沙箱--style=scss--routing=false

这将按照您的标志指示生成一个正常的角度项目，并将新生成的项目放置在您工作区的项目文件夹
demo workspace/projects/demo sandbox

生成项目后，您可以使用标准的
ng serve
为其提供服务，它将出现在端口4200上，无需包含
--project=
标志，它将正确地假定它
现在，您将最终使用
ng add
命令将角度材质原理图添加到沙盒项目中，并使用
--project=
标志确定应该在哪个项目中运行角度材质（同样，所有这些都在您的父工作区目录中）
ng add@Angular/Material--project=demo sandbox

您会注意到，您的“demo sandbox”实际上没有package.json，这是因为它利用了工作区中的package.json。一切都是分开的，但不是真的笑

最后，正如@smnbbrv建议的答案一样，添加角度材质作为对等依赖项
然后将“@angular/material”添加到`projects/demo library/src/package.json”的对等依赖项中（只需从主package.json复制一行@angular/material）

我添加了@angular/cdk、@angular/animations和hammerjs依赖项以及@angular/m