Add Angular Material to Nx Workspace

Question

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?

Amp

I think you need to use nx as a replacement for ng in an nx workspace. yarn nx add @angular/material – Hessler

Answer 1

First:

Ensure you have Angular Material installed: npm i @angular/material

Then:

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.

Fortissimo

Before you can do this, you need to install @angular/material npm install -D @angular/material. – Airbrush

@Airbrush Why -D? Isn't it a part of main dependencies? – Irmgard

you are right, this is not correct (anymore). I think you had to install it as a dev dependency in older versions (not sure). – Airbrush

Answer 2

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

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

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

Sextans

I did what you advice and get the error Bootstrap call not found during the nx generate @angular/material:ng-add. – Cobwebby

I figured it out, I needed to specify the project: nx generate @angular/material:ng-add --project=my-project – Cobwebby

Can you please tell me how to add angular material icon support to Nx ? – Diazonium

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? – Marenmarena

Answer 3

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

Then follow the same as material docs

Stlouis

Answer 4

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

That should do it.

Sporty

Answer 5

To find out Nx angular material plugin

nx list @angular/material

To install the plugin in dev dependencies

npm install -D @angular/material

Frontolysis

Answer 6

First you install Angular material using npm

npm install @angular/material --save

Then you run the following command:

npx nx g @angular/material:ng-add --project=your-project-name

if you don't do first step you'll get the following error:

 >  NX   Unable to resolve @angular/material:ng-add.

   Cannot find module '@angular/material/package.json'
   Require stack:
   - /workspaces/myproject/node_modules/nx/src/utils/package-json.js
   - /workspaces/myproject//node_modules/nx/src/utils/package-manager.js
   - /workspaces/myproject//node_modules/nx/bin/init-local.js
   - /workspaces/myproject//node_modules/nx/bin/nx.js
   Pass --verbose to see the stacktrace.

Colander

Answer 7

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.

Amp

Answer 8

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.

Organology

Answer 9

yarn add -W @angular/material && yarn nx g @angular/material:ng-add

Worked for me

Moir

Answer 10

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

Edyth