Cannot add @angular/material to new Nx workspace

[maartentibau]

Current Behavior

Create a new Nx Angular workspace (Integrated Repo option) v15.2.1.
After doing that I wanted to run npx nx add @angular/material --project=mr-20221129 --verbose

But no matter what I do, nothing will work and I'm always getting the same error.
I really don't understand what I'm doing wrong here.

Expected Behavior

I would think this should work out of the box since Nx uses the Angular CLI

Github Repo

No response

Steps to Reproduce

1. npx create-nx-workspace@latest
2. create an Angular app
3. once everything is installed try to add the @angular/material package
4. npx nx add @angular/material --project:my-project --verbose
5. also tried
6. npx nx add @angular/material:ng-add --project:my-project --verbose
7. also tried
8. npx ng add @angular/material --project:my-project --verbose

Nx Report

Node : 19.1.0
OS   : darwin arm64
npm  : 8.19.3

nx : 15.2.1
@nrwl/angular : 15.2.1
@nrwl/cypress : 15.2.1
@nrwl/detox : Not Found
@nrwl/devkit : 15.2.1
@nrwl/esbuild : Not Found
@nrwl/eslint-plugin-nx : 15.2.1
@nrwl/expo : Not Found
@nrwl/express : Not Found
@nrwl/jest : 15.2.1
@nrwl/js : 15.2.1
@nrwl/linter : 15.2.1
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : Not Found
@nrwl/react-native : Not Found
@nrwl/rollup : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : 15.2.1
@nrwl/web : Not Found
@nrwl/webpack : 15.2.1
@nrwl/workspace : 15.2.1
typescript : 4.8.4
---------------------------------------
Local workspace plugins:
---------------------------------------
Community plugins:

Failure Logs

No response

Additional Information

No response

[Coly010]

Can you try the following:

npm install @angular/material

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

[maartentibau]

Hi @Coly010 that seems to work with the --force flag on the npm install because there is an issue with jest-preset-angular which is currently not compatible with Angular v15 and when trying to install Angular Material it fails on that part.

There is an issue open on the jest-preset-angular repo to fix it in v12.2.3 which should be released very soon now.

[Coly010]

@maartentibau yeah I created the PR to add support for angular 15 to jest-preset-angular and it was merged a few days ago

thymikee/jest-preset-angular#1840

I believe the maintainer has a few extra things he wants to do before releasing a new version

[HARIPRASADHARI]

Hi @maartentibau @Coly010
I tried following command but I'm getting error. Can you suggest any alternate commands to add angular material in Nx Workspace.

`TypeError: Cannot read properties of undefined (reading 'kind')
at _angularImportsFromNode (C:Documents\inventory\myapplications\node_modules@schematics\angular\utility\ast-utils.js:196:16)
at C:Documents\inventory\myapplications\node_modules@schematics\angular\utility\ast-utils.js:239:24
at Array.map (<anonymous>)
at getDecoratorMetadata (C:Documents\inventory\myapplications\node_modules@schematics\angular\utility\ast-utils.js:239:10)
at addSymbolToNgModuleMetadata (C:Documents\inventory\myapplications\node_modules@schematics\angular\utility\ast-utils.js:285:19)
at addImportToModule (C:Documents\inventory\myapplications\node_modules@schematics\angular\utility\ast-utils.js:384:12)
at addModuleImportToModule (C:Documents\inventory\myapplications\node_modules@angular\cdk\schematics\utils\ast.js:46:55)
at addModuleImportToRootModule (C:Documents\inventory\myapplications\node_modules@angular\cdk\schematics\utils\ast.js:31:5)
at addAnimationsModuleToNonStandaloneApp (C:Documents\inventory\myapplications\node_modules@angular\material\schematics\ng-add\setup-project.js:111:58)
at C:Documents\inventory\myapplications\node_modules@angular\material\schematics\ng-add\setup-project.js:58:13

NX Cannot read properties of undefined (reading 'kind')`

[HARIPRASADHARI]

Current Behavior

Create a new Nx Angular workspace (Integrated Repo option) v15.2.1. After doing that I wanted to run npx nx add @angular/material --project=mr-20221129 --verbose

But no matter what I do, nothing will work and I'm always getting the same error. I really don't understand what I'm doing wrong here.

Expected Behavior

I would think this should work out of the box since Nx uses the Angular CLI

Github Repo

No response

Steps to Reproduce

1. npx create-nx-workspace@latest
2. create an Angular app
3. once everything is installed try to add the @angular/material package
4. npx nx add @angular/material --project:my-project --verbose
5. also tried
6. npx nx add @angular/material:ng-add --project:my-project --verbose
7. also tried
8. npx ng add @angular/material --project:my-project --verbose

Nx Report

Node : 19.1.0
OS   : darwin arm64
npm  : 8.19.3

nx : 15.2.1
@nrwl/angular : 15.2.1
@nrwl/cypress : 15.2.1
@nrwl/detox : Not Found
@nrwl/devkit : 15.2.1
@nrwl/esbuild : Not Found
@nrwl/eslint-plugin-nx : 15.2.1
@nrwl/expo : Not Found
@nrwl/express : Not Found
@nrwl/jest : 15.2.1
@nrwl/js : 15.2.1
@nrwl/linter : 15.2.1
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : Not Found
@nrwl/react-native : Not Found
@nrwl/rollup : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : 15.2.1
@nrwl/web : Not Found
@nrwl/webpack : 15.2.1
@nrwl/workspace : 15.2.1
typescript : 4.8.4
---------------------------------------
Local workspace plugins:
---------------------------------------
Community plugins:

Failure Logs

No response

Additional Information

No response

Any solution for above issue
--force not working

[HARIPRASADHARI]

Hi @Coly010 that seems to work with the --force flag on the npm install because there is an issue with jest-preset-angular which is currently not compatible with Angular v15 and when trying to install Angular Material it fails on that part.

There is an issue open on the jest-preset-angular repo to fix it in v12.2.3 which should be released very soon now.

Hi @maartentibau
I tried with --force but its not working

[Coly010]

@HARIPRASADHARI It looks like you're now encountering a bug from Angular: angular/components#26540

Until they resolve that, there isn't much we can do to help unless you upgrade your TS version to 4.9.5

[HARIPRASADHARI]

Hi @Coly010,
Thanks for the response.
Now its working after upgrading nrwl workspace

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.