bug(Angular Material): Installing Angular Material 14 under Angular 14 after update from 12.x fails: Cannot read properties of undefined (reading 'kind')

[Sebi2020]

trafficstars

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

11 (as far as I know)

Description

See #25215 (now closed...) for reference. The issue claims that this error is caused by an upgrade from Angular 11 to 14. This is not the case. This also happens if you start a new project with Angular 12 and upgrade to 14.

I followed the update guide, but the error persists.

Reproduction

Steps to reproduce:

1. Create new project with Angular 12.x
2. Upgrade to Angular 13.x
3. Upgrade to Angular 14.x
4. Install Angular material with command ng add @angular/material@14
5. Error: Cannot read properties of undefined (reading 'kind')

Expected Behavior

Should not cause an error. Steps to fix this should be mentioned in the update guide.

Actual Behavior

Install of Angular Material v. 14.x fails.

Environment

Angular CLI: 14.0.5
Node: 16.13.2
Package Manager: npm 8.13.2
OS: win32 x64

Angular: 14.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

@angular-devkit/architect       0.1400.5
@angular-devkit/build-angular   14.0.5
@angular-devkit/core            14.0.5
@angular-devkit/schematics      14.0.5
@angular/cdk                    14.0.4
@angular/material               14.0.4
@schematics/angular             14.0.5
rxjs                            6.6.7
typescript                      4.6.4

• Browser(s): n/a
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[vvolodin]

I'm having a similar problem, using Angular 14.0.5:

Skipping installation: Package already installed
? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? Yes
? Include the Angular animations module? Include and enable animations
UPDATE package.json (1747 bytes)
✔ Packages installed successfully.
Cannot read property 'kind' of undefined

[timothylombrana]

Same with just a new project, no upgrades needed to reproduce.

Angular CLI: 14.1.0
Node: 16.16.0
Package Manager: yarn 1.22.10 
OS: darwin x64

Angular: 14.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1401.0
@angular-devkit/build-angular   14.1.0
@angular-devkit/core            14.1.0
@angular-devkit/schematics      14.1.0
@angular/fire                   7.4.1
@schematics/angular             14.1.0
rxjs                            6.6.7
typescript                      4.6.4

[adorogensky]

angular team, updates?

[addon-tly]

Same here. Getting this error on installing angular material, and also on calling ng g @angular/material:navigation

Angular CLI: 14.1.0 Node: 16.15.1 Package Manager: npm 8.11.0 OS: win32 x64

Angular: 14.1.0 ... animations, cdk, cli, common, compiler, compiler-cli, core ... forms, material, platform-browser, platform-browser-dynamic ... router

Package Version

@angular-devkit/architect 0.1401.0 @angular-devkit/build-angular 14.1.0 @angular-devkit/core 14.1.0 @angular-devkit/schematics 14.1.0 @schematics/angular 14.1.0 rxjs 7.5.6 typescript 4.6.4

[adorogensky]

ANGULAR TEAM, updates????

[RSx19]

Same here, did someone find a workaround?

[Sebi2020]

still no response from the angular team...

[SebaQuiros]

Exact same problem. Console logs: Cannot read properties of undefined (reading 'kind').

Angular: 14.0.1 ... animations, cli, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1400.1 @angular-devkit/build-angular 14.0.1 @angular-devkit/core 14.0.1 @angular-devkit/schematics 14.0.1 @angular/cdk 14.1.1 @angular/material 14.1.1 @schematics/angular 14.0.1 rxjs 7.5.5 typescript 4.6.4

C:\Users\sebaq\Documents\Programación\ArgentinaPrograma\Proyectos\Portfolio>

[aallnneess]

Same Problem. Updating Angular 13 to 14...

[edwincosta]

I have the same issue: Cannot read properties of undefined (reading 'kind')

It happens when I try to use: ng generate @angular/material:navigation <component-name>

Project dependencies

"@angular/animations": "^14.1.3", "@angular/cdk": "^14.1.2", "@angular/common": "^14.1.3", "@angular/compiler": "^14.1.3", "@angular/core": "^14.1.3", "@angular/forms": "^14.1.3", "@angular/material": "^14.1.2", "@angular/platform-browser": "^14.1.3", "@angular/platform-browser-dynamic": "^14.1.3", "@angular/router": "^14.1.3", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4"

[FatalMerlin]

I have the same problem using ng add @angular/material

[FatalMerlin]

Okay I just found a workaround:

1. run ng add @angular/material as usual
2. select theme
3. select typography
4. IMPORTANT: Choose to disable Angular animations module ("Do not include") - the last option

Voilà

P.S.: I believe you can then manually configure the animations module by following these instructions: https://angular.io/guide/animations#step-1-enabling-the-animations-module

[uvero]

@FatalMerlin your solution worked and helped me with ng add @angular/material. However, I ran into the same error with ng generate @angular/material:navigation <component-name>, like @edwincosta

Anyone has help?

[FatalMerlin]

@uvero glad to help!

Regarding your question:

Try running:

npm i -D @schematics/angular or yarn add -D @schematics/angular

It resolved a similar problem for me :)

[uvero]

Thank @FatalMerlin, I've tried it, but it didn't help. What did help is adding --skip-import, so, if anyone stumbles upon the same problem, I hope it helps.

However, those are still workarounds - I hope the Angular team figures it out soon.

[Codefans-fan]

same issue for me

[macorifice]

same issue here

[zlaval21]

I had this issue and fixed it by updating to the latest TypeScript version. Currently 4.8.3. Hope this works for others.

[wenici]

Bon je viens de trouver une solution :

1. Cours `ng add @angular/material`comme d'habitude

2. sélectionne un thème

3. sélectionner la typographie

4. IMPORTANT : Choisissez de désactiver le module d'animations angulaires ("Ne pas inclure") - la dernière option

Voilà

PS : Je pense que vous pouvez ensuite configurer manuellement le module d'animations en suivant ces instructions : https://angular.io/guide/animations#step-1-enabling-the-animations-module

It worked for me, thanks

[whizyrel]

Update your typescript version, that works too

[zarend]

Hello @Sebi2020,

Does the issue persist when upgrading typescript version?

-Zach

[exitlol]

@zarend I can confirm as i ran into this issue while updating a project from angular 10 to 14 with the correct steps. That updating typestript to the latest version will solve the installation error, and completes without any issue.

Hope this helps.

[alanblake]

confirming npm i typescript@latest fixed this issue for me

[zarend]

@Sebi2020,

I believe this issue is resolved by updating typescript as suggested by zlaval21 and a few others. I think we can go ahead and close out this issue. Thank you everyone for participating.

@Sebi2020 does this issue persist for you? If so, could you please provide a stackblitz reproduction?

-Zach

[Sebi2020]

@zarend No, it does not. I will close the issue now

[MauriRios]

npm i typescript@latest works for me

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}