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

trafficstars

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:

git clone [email protected]:adorogensky/angular-training.git
git checkout ng11
nvm install v14.15.5
nvm use v14.15.5
npm uninstall -g @angular/cli
npm i
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.

git add .
git commit --amend --no-edit
ng update @angular/core@14 @angular/cli@14
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/[email protected]. ✔ Package information loaded.

The package @angular/[email protected] 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