16

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

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)。怎么了？

4

2 回答 2

31

你不需要在那里添加它。

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

ng add @angular/material

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

你刚刚做了什么：

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

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

于 2018-11-18T09:12:34.080 回答
22

由于 Angular 7...

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

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

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

那么这究竟是什么变化呢？这“主要”是我们一直在做的事情。

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

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

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

  1. 跑git clone $ssh_url_for_repo_here
  2. 将 CD 放入新克隆的工作区 repocd demo-workspace
  3. 使用 ng new 在没有项目的情况下在同一目录中创建工作区ng new demo-workspace --directory=./ --create-application=false
    • 这将创建一个角度工作区。它看起来类似于一个项目，但如果你键入它，它不会做任何事情，但会失败ng serve
  4. 在同一个文件夹（您的工作区 repo 的根目录）中，使用ng generate demo-library或生成您的库，包括所需的前缀） ng g demo-library --prefix=demo。
    • 这将在您的工作区文件夹中创建一个“项目”文件夹。它会将您的新库放在您的“项目”文件夹中。
  5. 然后，您将运行ng build demo-library以运行新库的初始构建，这将dist在工作区的根目录中创建一个文件夹。
  6. 接下来，您将创建沙盒项目，您将在使用ng generate命令和所需标志开发和测试 Angular 库时使用该项目，如下所示ng g application demo-sandbox --style=scss --routing=false
    • 这将按照您的标志说明生成一个普通的角度项目，并将新生成的项目放在工作区的项目文件夹中demo-workspace/projects/demo-sandbox
  7. 生成项目后，您可以使用标准提供它ng serve，它会出现在端口 4200 上，无需为此包含--project=标志，它会正确假定它。
  8. 现在，您最终将使用ng add命令将 Angular Material 原理图添加到您的沙箱项目中，并使用--project=标志来确定 Angular Material 应该在哪个项目中运行（同样，所有这些都在您的父工作区目录中）ng add @angular/material --project=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/”文件夹，这也会触发您当前提供的“演示沙盒”项目进行重建本身。
于 2019-06-03T20:21:36.413 回答