Adding Angular Material to Nx Workspace not working-CodePudding

I'm trying to add angular-material to my nx-workspace.

I've tried this command:

nx add @angular/material

And it generated this Error Response:

Cannot find project '@angular/material'

Then I've tried this command:

npx nx g @angular/material:ng-add --project=groups-app

But it generated another Error Response:

Unable to resolve @angular/material:ng-add. Cannot find module '@angular/material/package.json'

Does anyone know how I can fix this issue and how I can add angular-material to my nx-workspace

CodePudding user response：

You can manually do this.

Follow https://material.angular.io/guide/getting-started and manually do each step. e.g. Install

Angular Material
the Component Dev Kit (CDK)
Angular Animations

Add the styles direct in project.json or import in apps\groups-app\src\styles.scss. Below I've added prebuilt styles.

    "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": []
      },

This works for libraries too.

If you get lost, create a new separate (non nx) angular only app and see what ng add @angular/material does and replicate in your nx app.