bug(ng add @angular/material): doesn't work correctly after update from 11 to 14

[adorogensky]

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

No response

Description

after updating a basic angular app from 11 to 14, ng add @angular/material doesn't work correctly.
ng add @angular/material prints Cannot read property 'kind' of undefined
then after adding mad-radio-group and mat-radio-button (see steps to reproduce below) mat-radio-button won't get selected after clicking on it

Reproduction

Steps to reproduce:

1. git clone git@github.com:adorogensky/angular-training.git
2. git checkout ng11
3. nvm install v14.15.5
4. nvm use v14.15.5
5. npm uninstall -g @angular/cli
6. npm i
7. ng v
   Angular CLI: 11.2.2
   Node: 14.15.5
   OS: linux x64

Angular: 11.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1102.2
@angular-devkit/build-angular 0.1102.2
@angular-devkit/core 11.2.2
@angular-devkit/schematics 11.2.2 (cli-only)
@schematics/angular 11.2.2 (cli-only)
@schematics/update 0.1102.2 (cli-only)
rxjs 6.6.6
typescript 4.1.5
9. npm -v
6.14.11
11. git add .
12. git commit -m 'wip'
13. ng update @angular/core@12 @angular/cli@12
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: npm
Collecting installed dependencies...
Found 28 dependencies.
Fetching dependency metadata from registry...
Updating package.json with dependency @angular-devkit/build-angular @ "12.2.17" (was "0.1102.2")...
Updating package.json with dependency @angular/cli @ "12.2.17" (was "11.2.2")...
Updating package.json with dependency @angular/compiler-cli @ "12.2.16" (was "11.2.3")...
Updating package.json with dependency karma @ "6.4.0" (was "6.1.1")...
Updating package.json with dependency typescript @ "4.3.5" (was "4.1.5")...
Updating package.json with dependency @angular/animations @ "12.2.16" (was "11.2.3")...
Updating package.json with dependency @angular/common @ "12.2.16" (was "11.2.3")...
Updating package.json with dependency @angular/compiler @ "12.2.16" (was "11.2.3")...
Updating package.json with dependency @angular/core @ "12.2.16" (was "11.2.3")...
Updating package.json with dependency @angular/forms @ "12.2.16" (was "11.2.3")...
Updating package.json with dependency @angular/platform-browser @ "12.2.16" (was "11.2.3")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "12.2.16" (was "11.2.3")...
Updating package.json with dependency @angular/router @ "12.2.16" (was "11.2.3")...
UPDATE package.json (1214 bytes)
✔ Packages successfully installed.
** Executing migrations of package '@angular/cli' **

▸ Remove deprecated options from 'angular.json' that are no longer present in v12.
UPDATE angular.json (3835 bytes)
Migration completed.

▸ Update 'zone.js' to version 0.11.x.
Read more about this here: https://github.com/angular/angular/blob/master/packages/zone.js/CHANGELOG.md#breaking-changes-since-zonejs-v0111
UPDATE package.json (1215 bytes)
UPDATE src/polyfills.ts (2820 bytes)
UPDATE src/test.ts (743 bytes)
UPDATE src/environments/environment.ts (665 bytes)
✔ Packages installed successfully.
Migration completed.

▸ Remove 'emitDecoratorMetadata' TypeScript compiler option.
Decorator metadata is no longer needed by Angular.
Read more about this here: https://www.typescriptlang.org/docs/handbook/decorators.html#metadata
Migration completed.

▸ Lazy loading syntax migration.
Update lazy loading string syntax to use dynamic imports.
Migration completed.

▸ Remove deprecated ViewEngine-based i18n build and extract options.
Options present in the configuration will be converted to use non-deprecated options.
Migration completed.

▸ Updates Web Worker consumer usage to use the new syntax supported directly by Webpack 5.
Migration completed.

▸ Remove invalid 'skipTests' option in '@schematics/angular:module' Angular schematic options.
Migration completed.

▸ Replace the deprecated '--prod' in package.json scripts.
UPDATE package.json (1215 bytes)
Migration completed.

** Executing migrations of package '@angular/core' **

▸ In Angular version 12, the type of ActivatedRouteSnapshot.fragment is nullable.
This migration automatically adds non-null assertions to it.
Migration completed.

▸ XhrFactory has been moved from @angular/common/http to @angular/common.
Migration completed.

▸ Automatically migrates shadow-piercing selector from /deep/ to the recommended alternative ::ng-deep.
Migration completed.
14. git add .
15. git commit --amend --no-edit
16. ng update @angular/core@13 @angular/cli@13
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 13.3.8 to perform the update.
✔ Package successfully installed.
Using package manager: 'npm'
Collecting installed dependencies...
Found 28 dependencies.
Fetching dependency metadata from registry...
Updating package.json with dependency @angular-devkit/build-angular @ "13.3.8" (was "12.2.17")...
Updating package.json with dependency @angular/cli @ "13.3.8" (was "12.2.17")...
Updating package.json with dependency @angular/compiler-cli @ "13.3.11" (was "12.2.16")...
Updating package.json with dependency typescript @ "4.6.4" (was "4.3.5")...
Updating package.json with dependency @angular/animations @ "13.3.11" (was "12.2.16")...
Updating package.json with dependency @angular/common @ "13.3.11" (was "12.2.16")...
Updating package.json with dependency @angular/compiler @ "13.3.11" (was "12.2.16")...
Updating package.json with dependency @angular/core @ "13.3.11" (was "12.2.16")...
Updating package.json with dependency @angular/forms @ "13.3.11" (was "12.2.16")...
Updating package.json with dependency @angular/platform-browser @ "13.3.11" (was "12.2.16")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "13.3.11" (was "12.2.16")...
Updating package.json with dependency @angular/router @ "13.3.11" (was "12.2.16")...
UPDATE package.json (1212 bytes)
✔ Packages successfully installed.
** Executing migrations of package '@angular/cli' **

▸ Remove polyfills required only for Internet Explorer which is no longer supported.
UPDATE src/polyfills.ts (2340 bytes)
Migration completed.

▸ Remove no longer valid Angular schematic options from angular.json.
Migration completed.

▸ Remove deprecated options from 'angular.json' that are no longer present in v13.
UPDATE angular.json (3490 bytes)
Migration completed.

▸ Updating '.gitignore' to include '.angular/cache'.
UPDATE .gitignore (647 bytes)
Migration completed.

▸ Update library projects to be published in partial mode and removed deprecated options from ng-packagr configuration.
Migration completed.

** Executing migrations of package '@angular/core' **

▸ Migrates [routerLink]="" in templates to [routerLink]="[]" because these links are likely intended to route to the current page with updated fragment/query params.
Migration completed.

▸ In Angular version 13, the teardown flag in TestBed will be enabled by default.
This migration automatically opts out existing apps from the new teardown behavior.
UPDATE src/test.ts (790 bytes)
Migration completed.

▸ As of Angular version 13, entryComponents are no longer necessary.
Migration completed.

17. git add .
18. git commit --amend --no-edit
19. ng update @angular/core@14 @angular/cli@14
20. The installed Angular CLI version is outdated.
    Installing a temporary Angular CLI versioned 14.0.4 to perform the update.
    ✔ Package successfully installed.
    Using package manager: npm
    Collecting installed dependencies...
    Found 28 dependencies.
    Fetching dependency metadata from registry...
    Updating package.json with dependency @angular-devkit/build-angular @ "14.0.4" (was "13.3.8")...
    Updating package.json with dependency @angular/cli @ "14.0.4" (was "13.3.8")...
    Updating package.json with dependency @angular/compiler-cli @ "14.0.4" (was "13.3.11")...
    Updating package.json with dependency @angular/animations @ "14.0.4" (was "13.3.11")...
    Updating package.json with dependency @angular/common @ "14.0.4" (was "13.3.11")...
    Updating package.json with dependency @angular/compiler @ "14.0.4" (was "13.3.11")...
    Updating package.json with dependency @angular/core @ "14.0.4" (was "13.3.11")...
    Updating package.json with dependency @angular/forms @ "14.0.4" (was "13.3.11")...
    Updating package.json with dependency @angular/platform-browser @ "14.0.4" (was "13.3.11")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "14.0.4" (was "13.3.11")...
    Updating package.json with dependency @angular/router @ "14.0.4" (was "13.3.11")...
    UPDATE package.json (1203 bytes)
    ✔ Packages successfully installed.
    ** Executing migrations of package '@angular/cli' **

▸ Remove 'defaultProject' option from workspace configuration.
The project to use will be determined from the current working directory.
UPDATE angular.json (3450 bytes)
Migration completed.

▸ Remove 'showCircularDependencies' option from browser and server builders.
Migration completed.

▸ Replace 'defaultCollection' option in workspace configuration with 'schematicCollections'.
Migration completed.

▸ Update Angular packages 'dependencies' and 'devDependencies' version prefix to '^' instead of '~'.
UPDATE package.json (1204 bytes)
✔ Packages installed successfully.
Migration completed.

▸ Remove 'package.json' files from library projects secondary entrypoints.
Migration completed.

▸ Update TypeScript compilation target to 'ES2020'.
UPDATE tsconfig.json (538 bytes)
Migration completed.

** Executing migrations of package '@angular/core' **

▸ As of Angular version 13, entryComponents are no longer necessary.
Migration completed.

▸ In Angular version 14, the pathMatch property of Routes was updated to be a strict union of the two valid options: 'full'|'prefix'.
Routes and Route variables need an explicit type so TypeScript does not infer the property as the looser string.
Migration completed.

▸ As of Angular version 14, Forms model classes accept a type parameter, and existing usages must be opted out to preserve backwards-compatibility.
Migration completed.
21. git add .
22. git commit --amend --no-edit
23. ng add @angular/material
ℹ Using package manager: npm
✔ Found compatible package version: @angular/material@14.0.4.
✔ Package information loaded.

The package @angular/material@14.0.4 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview:
https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? No
? Include the Angular animations module? Include and enable animations
UPDATE package.json (1270 bytes)
✔ Packages installed successfully.
Cannot read property 'kind' of undefined
24. add this code from https://material.angular.io/components/radio/examples to app.component.html
<mat-radio-group aria-label="Select an option"> <mat-radio-button value="1">Option 1</mat-radio-button> <mat-radio-button value="2">Option 2</mat-radio-button> </mat-radio-group>
25. add BrowserAnimationsModule and MatRadioModule to imports sections of app.module.tx
26. run
27. clicking on mat-radio-group is not working

Expected Behavior

when updating a basic angular app from 11 to 14, ng add @angular/material should work correctly, specifically should not show the error and clicking on mat-radio-button should work

Actual Behavior

when updating a basic angular app from 11 to 14, ng add @angular/material doesn't work correctly, specifically it shows the error and clicking on mat-radio-button won't work

Environment

• Angular: 11.2.2
• CDK/Material: 11.2.2
• Browser(s): Version 102.0.5005.115 (Official Build) Fedora Project (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Fedora release 36 (Thirty Six)

[Sebi2020]

Similiar issue #25246

[crisbeto]

Closing since it's a fairly old issue with no further reports. I also wasn't able to reproduce it.

[angular-automatic-lock-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.}