Add Angular Material to Nx Workspace

user_212215 0
Viewed 8633

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?

nrwl-nx angular-material angular
7 Answers

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.

user_102471330

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

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

Then follow the same as material docs

user_26744400

To find out Nx angular material plugin

nx list @angular/material

To install the plugin in dev dependencies

npm install -D @angular/material

user_190507440

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

That should do it.

user_98388550

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.

user_2122150

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.

user_101840910
Related