添加 Angular Material 到 Nx 工作区

Add Angular Material to Nx Workspace

我想将 angular-material 添加到我的 nx-workspace。

angular material 文档 (https://material.angular.io/guide/getting-started) 说我应该 运行 ng add @angular/material.

我已经在我的 nx 工作区的根目录、我想将它添加到的应用程序文件夹以及我想将它添加到的 lib 项目文件夹中进行了尝试。在所有情况下,我都会收到消息 The add command requires to be run in an Angular project, but a project definition could not be found.

Angular Material 文档曾经包含有关如何手动添加依赖项的说明,但我找不到了。现在有谁知道如何将它添加到 Nx 工作区中的项目中吗?

为了它的价值,我创建了一个新的 Angular 项目(没有 Nx)和 运行 那里的 ng add @angular/material 命令,然后查看了产生的差异,并应用了Nx 工作区中的那些更改似乎工作正常。只是想知道有没有更好的方法。

如果您创建了一个没有 angular.json 的空工作区,您将有一个 workspace.json,我认为这几乎是相同的。

假设您已经生成了一个agular应用:

  1. 安装 angular material 库:yarn add @angular/material

  2. 从 nx 控制台查看可用命令:nx list @angular/material

  3. 将angular material添加到默认项目:nx generate @angular/material:ng-add

PS。可能它会在 nx 而不是 found/installed 上抛出错误。 yarn add -g @nrwl/cli。我认为可以将 angular material 添加到另一个项目,但还没有尝试

https://github.com/nrwl/nx/issues/3779#issuecomment-751136586

Yarn 在使用主题时会导致构建错误。我是 运行 我用纱线构建的。它会抱怨 @use '~@angular/material' as mat;陷入循环。

npm install @angular/material && npx nx g @angular/material:ng-add

然后按照与material文档相同的方式进行操作

npx nx g @angular/material:ng-add --project=my-project-name 是您需要在 Nx 工作区中 运行 的命令。

不要忘记包含项目名称,否则您会看到错误。

此外,如果您仍然遇到错误,请尝试回答有关 Set up global Angular Material typography stylesSet up browser animations for Angular Material 的问题 no

免责声明:另一位成员已经在评论中回答正确,但我认为应该固定像这样的简单答案。