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?

Answer 1

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

Answer 2

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.

Answer 3

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

Then follow the same as material docs