31

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

The angular material docs (https://material.angular.io/guide/getting-started) say I should run ng add @angular/material.

I've tried that in the root of my nx workspace, as well as in an application folder I want to add it to, as well as in a lib project folder I want to add it to. In all cases I get the message The add command requires to be run in an Angular project, but a project definition could not be found.

The Angular Material docs used to include instructions on how to add dependencies manually, but I can't find that anymore. Does anyone know how to add it to projects in an Nx workspace these days?

vicatcu
  • 5,407
  • 7
  • 41
  • 65
  • I think you need to use `nx` as a replacement for `ng` in an nx workspace. `yarn nx add @angular/material` – s.Lawrenz May 14 '21 at 00:38

10 Answers10

37

npx nx g @angular/material:ng-add --project=my-project-name is the command you need to run in your Nx Workspace.

Do not forget to include the project name or you will see errors.

Additionally, If you continue having errors try by answering no to the questions about Set up global Angular Material typography styles and Set up browser animations for Angular Material.

Disclaimer: Another member already answered correctly in the comments but I think a simple answer like this one should be pinned.

algife
  • 495
  • 4
  • 5
  • Before you can do this, you need to install @angular/material `npm install -D @angular/material`. – fonzane May 31 '23 at 08:18
20

If you created the an empty workspace you don't have angular.json, you will have a workspace.json, which is almost identical I think.

Assuming that you have already generated an agular app:

  1. Install the angular material lib: yarn add @angular/material

  2. To see the avaible commands from the nx console: nx list @angular/material enter image description here

  3. To add angular material to the default project: nx generate @angular/material:ng-add enter image description here

PS. Probably it will thrown an error on nx not found/installed. yarn add -g @nrwl/cli. I think is possible to add angular material to another project, didn't try that yet

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

iulian3000
  • 1,270
  • 13
  • 26
  • I did what you advice and get the error `Bootstrap call not found` during the `nx generate @angular/material:ng-add`. – Marco Oct 09 '21 at 20:40
  • 7
    I figured it out, I needed to specify the project: `nx generate @angular/material:ng-add --project=my-project` – Marco Oct 09 '21 at 20:45
  • Can you please tell me how to add angular material icon support to Nx ? – ATHER Feb 10 '22 at 07:32
  • how to handle when I run command : nx generate @angular/material:ng-add and got peer dependencies conflict ? --force flag & --legacy-peer-deps seem not works? – Khương Mai Jun 01 '23 at 18:27
15
npm install @angular/material && npx nx g @angular/material:ng-add

Then follow the same as material docs

jithil
  • 1,098
  • 11
  • 11
7

npm i @angular/material && npx nx g @angular/material:ng-add --project=my-project-name

That should do it.

Bongani Sibiya
  • 81
  • 1
  • 1
5

To find out Nx angular material plugin

nx list @angular/material

To install the plugin in dev dependencies

npm install -D @angular/material

Sergio Vazquez
  • 51
  • 1
  • 1
0

For what it's worth I created a new Angular project (without Nx) and ran the ng add @angular/material command there, then took a look at the diff that resulted, and applied those changes in the Nx workspace and that seems to work fine. Just wondering if there is a better way.

vicatcu
  • 5,407
  • 7
  • 41
  • 65
0

Yarn will cause build errors when using theming. I was running my build with yarn. It will complain about the @use '~@angular/material' as mat; being in a loop.

David Diomede
  • 51
  • 1
  • 4
0
yarn add -W @angular/material && yarn nx g @angular/material:ng-add

Worked for me

Wassim Mriri
  • 68
  • 6
0

To setup angular material on nx you can follow the steps from this [link] 1.

Philip Mutua
  • 6,016
  • 12
  • 41
  • 84
0

While running the command

npm install @angular/material && npx nx g @angular/material:ng-add --project=<project_name> I faced the below issue

SchematicsException [Error]: Bootstrap call not found
    at findBootstrapModulePath (/Users/san/project/Sample/fetebird-ui/node_modules/@schematics/angular/utility/ng-ast-utils.js:67:15)
    at getAppModulePath (/Users/san/project/Sample/fetebird-ui/node_modules/@schematics/angular/utility/ng-ast-utils.js:85:32)
    at addAnimationsToNonStandaloneApp (/Users/san/project/Sample/fetebird-ui/node_modules/@angular/material/schematics/ng-add/setup-project.js:94:61)
    at /Users/san/project/Sample/fetebird-ui/node_modules/@angular/material/schematics/ng-add/setup-project.js:58:13
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async callRuleAsync (/Users/san/project/Sample/fetebird-ui/node_modules/@angular-devkit/schematics/src/rules/call.js:77:18)

 >  NX   Bootstrap call not found

To resolve the issue, change the below configuration in each application project.json

"targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:browser",

Also, need to change the option main to bootstrap instead of main

 "options": {
        "main": "apps/host/src/bootstrap.ts",

Reference - https://github.com/nrwl/nx/issues/7621

Once done with the angular material installation, revert the changes

San Jaisy
  • 15,327
  • 34
  • 171
  • 290