Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Is this a regression?

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:

Create new project with Angular 12.x
Upgrade to Angular 13.x
Upgrade to Angular 14.x
Install Angular material with command ng add @angular/material@14
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

Issue Analytics

State:
Created a year ago
Reactions:9
Comments:27 (2 by maintainers)

Top GitHub Comments

14reactions

FatalMerlincommented, Aug 22, 2022

Okay I just found a workaround:

run ng add @angular/material as usual
select theme
select typography
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

5reactions

uverocommented, Aug 27, 2022

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.

Top Results From Across the Web

angular - Cannot read properties of undefined (reading 'kind')

As you can see, angular is trying to read property "kind" from some other value. So perhaps somewhere in your code, you have...

cannot read properties of undefined (reading 'foreach') in ...

ERROR TypeError:Cannot read property 'forEach' of undefined in Angular ... Installing Angular Material 14 under Angular 14 after update from 12.x fails: ...

Update Angular to v15

Breaking changes in Angular v15link · Angular v15 supports node. · Angular v15 supports TypeScript version 4.8 or laterlink · @keyframes name format...

@angular-architects/module-federation - npm

Seamlessly using Webpack Module Federation with the Angular CLI. ... Version 14+: Use the --type switch to get the new streamlined ...

Angular Material Theming System - Complete Guide

In this article, we will learn about custom themes, modifying typography and much more using new SASS mixins. In this article, you will...