将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

然后添加"@角/材料"到peerDependencies的projects/first-lib/src/package.json(只是与复制线@angular/material从主package.json).

你刚刚做了什么:

1. 您package.json已将库安装到主服务器,现在可以在本地运行代码,因为本地角度cli将使用主服务器package.json和node_modules
2. 您将其设置为库的依赖项,在您发布它并在另一个地方安装后,它会要求您也安装peerDependencies它(作为npm警告)

当然,您也可以将其添加到dependencies代替peerDependencies并自动安装到库中,但这不是管理前端依赖性的好方法(但对于纯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，而不仅仅是一个并且假设另一个。

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