将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”添加到peerDependencies的{​​{1}}中（只需从主projects/first-lib/src/package.json复制带有@angular/material的行）。

您刚刚做了什么：

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

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

Answer 2

自Angular 7起...

由于ng7和ng CLI 7的存在，我们可以遵循的Angular Library开发的首选方法如下。

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

这可以做一些事情。  1.使您的库和沙箱项目保持独立，并在工作区中生成一个端到端（e2e）测试项目。  2.将所有项目保持在一起，但相互独立。

那么这到底有什么变化？这主要是我们做事的方式。

请记住，您需要将外部原理图/库添加到沙箱项目中，而不是添加到工作区中。在ng6中，我认为并非如此，因为ng6中，您同时创建了一个工作区和一个项目，然后不得不做一些重命名的工作。使用ng7时，您可以将--create-application标志设置为false，然后创建沙箱/开发项目。就是说，当您使用ng add来向沙盒项目中添加外部库/示意图（如棱角材质）时，您将在--project=命令中使用ng add标志。现在，我们已经完成了以上的所有步骤。

注意：我总是在原始位置（gitlab / github / bitbucket / etc）创建我的存储库，然后在执行任何操作之前将其克隆到本地，

出于演示目的，我们将此库称为“演示库”，而我的存储库将命名为“ demo-workspace”

1. 运行git clone $ssh_url_for_repo_here
2. 将CD放入新克隆的工作区存储库cd demo-workspace
3. 使用ng new命令在没有项目的情况下在同一目录ng new demo-workspace --directory=./ --create-application=false中创建工作空间
   • 这将创建一个有角度的工作区。它看起来类似于项目，但是除了键入ng serve
   之外不会执行任何操作。
4. 在同一文件夹（工作空间仓库的ROOT）中，使用ng generate demo-library或ng g demo-library --prefix=demo生成包含所需前缀的库。
   • 这将在您的工作区文件夹中创建一个“项目”文件夹。它将把新库放置在“项目”文件夹中。
5. 然后，您将运行ng build demo-library以运行新库的初始构建，这将在工作区的根目录中创建一个dist文件夹。
6. 接下来，您将创建自己的沙盒项目，该项目将在使用ng generate命令和所需的标志（例如，ng g application demo-sandbox --style=scss --routing=false）开发和测试角度库时使用
   • 这将按照标志说明生成一个正常的有角项目，并将新生成的项目放置在工作区的项目文件夹demo-workspace/projects/demo-sandbox中
7. 生成项目后，可以使用标准ng serve进行服务，它将显示在端口4200上，无需为此添加--project=标志，它将假定为正确地。
8. 现在，您最终将使用ng add命令并使用--project=标志将Angular Material原理图添加到您的沙箱项目中，以标识Angular Material应该在哪个项目中运行（同样，所有这些都在您的父级中工作区目录）ng add @angular/material --project=demo-sandbox
   • 您会注意到，“ demo-sandbox”实际上没有package.json，这是因为它利用了工作空间中的package.json。一切都是分开的，但不是真的。
9. 最后将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，而不仅仅是一个并假设另一个。

1. 完成此操作后，就可以运行ng build命令来重建演示库项目，从而在工作区项目中创建一个新的“ dist /”文件夹，这也将触发当前的服务'demo-sandbox'项目来重建自身。