将角度材料添加到 Nx 工作区不起作用答案

【问题标题】：Adding Angular Material to Nx Workspace not working将角度材料添加到 Nx 工作区不起作用
【发布时间】：2022-11-24 21:17:16
【问题描述】：

我正在尝试将角度材料添加到我的 nx-workspace。

我试过这个命令：

nx add @angular/material

它产生了这个错误响应：

找不到项目“@angular/material”

然后我试过这个命令：
npx nx g @angular/material:ng-add --project=groups-app
但它产生了另一个错误响应：

无法解析@angular/material:ng-add。找不到模块“@angular/material/package.json”

有谁知道我如何解决这个问题以及如何将角度材料添加到我的 nx-workspace

【问题讨论】：

标签： angular angular-material nrwl-nx

【解决方案1】：

您可以手动执行此操作。

关注https://material.angular.io/guide/getting-started 手动完成每一步。例如安装

角材
组件开发工具包 (CDK)
角度动画

直接在project.json中添加样式或在appsgroups-appsrcstyles.scss中导入。下面我添加了预建样式。

    "build": {
      "executor": "@angular-devkit/build-angular:browser",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/groups-app",
        "index": "apps/groups-app/src/index.html",
        "main": "apps/groups-app/src/main.ts",
        "polyfills": "apps/groups-app/src/polyfills.ts",
        "tsConfig": "apps/groups-app/tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": [
          "apps/groups-app/src/favicon.ico",
          "apps/groups-app/src/assets"
        ],
        "styles": [
          "apps/groups-app/src/styles.scss",
          "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"  <----
        ],
        "scripts": []
      },

这也适用于图书馆。

如果你迷路了，创建一个新的单独的（非 nx）angular only 应用程序并查看 ng add @angular/material 做了什么并在你的 nx 应用程序中复制。

【讨论】：