Angular 16迁移后出现ngClass/ngSwitch等指令绑定错误求助

问题详情 #

• 商用应用迁移至Angular 16后，出现编译错误：Can't bind to 'ngClass' since it isn't a known property of 'div'，导致应用无法运行。
• 创建新项目排查差异：
  • Angular 15版本新项目可正常运行。
  • Angular 16版本新项目中，模板内代码<div class="terminal" [ngSwitch]="selection.value">触发错误：Can't bind to 'ngSwitch' since it isn't a known property of 'div'.ngtsc(-998002)，错误定位在AppComponent模板。
  • Angular 16新项目可完成编译，但Visual Studio Code的Problems标签仍显示该错误，Angular 15无此异常。

版本切换命令 #

• 升级至Angular 16的命令：

  sudo npm uninstall -g @angular/cli
  sudo npm install -g @angular/cli
  

• 回退至Angular 15的命令：

  sudo npm uninstall -g @angular/cli
  sudo npm install -g @angular/cli@15
  

项目依赖配置 #

Angular 16新项目package.json（存在错误） #

{"name": "project","version": "0.0.0","scripts": {"ng": "ng","start": "ng serve","build": "ng build","watch": "ng build --watch --configuration development","test": "ng test"},"private": true,"dependencies": {"@angular/animations": "^16.1.0","@angular/common": "^16.1.0","@angular/compiler": "^16.1.0","@angular/core": "^16.1.0","@angular/forms": "^16.1.0","@angular/platform-browser": "^16.1.0","@angular/platform-browser-dynamic": "^16.1.0","@angular/router": "^16.1.0","rxjs": "~7.8.0","tslib": "^2.3.0","zone.js": "~0.13.0"},"devDependencies": {"@angular-devkit/build-angular": "^16.1.1","@angular/cli": "~16.1.1","@angular/compiler-cli": "^16.1.0","@types/jasmine": "~4.3.0","jasmine-core": "~4.6.0","karma": "~6.4.0","karma-chrome-launcher": "~3.2.0","karma-coverage": "~2.2.0","karma-jasmine": "~5.1.0","karma-jasmine-html-reporter": "~2.1.0","typescript": "~5.1.3"}}

Angular 15新项目package.json（正常运行） #

{"name": "project","version": "0.0.0","scripts": {"ng": "ng","start": "ng serve","build": "ng build","watch": "ng build --watch --configuration development","test": "ng test"},"private": true,"dependencies": {"@angular/animations": "^15.2.0","@angular/common": "^15.2.0","@angular/compiler": "^15.2.0","@angular/core": "^15.2.0","@angular/forms": "^15.2.0","@angular/platform-browser": "^15.2.0","@angular/platform-browser-dynamic": "^15.2.0","@angular/router": "^15.2.0","rxjs": "~7.8.0","tslib": "^2.3.0","zone.js": "~0.12.0"},"devDependencies": {"@angular-devkit/build-angular": "^15.2.8","@angular/cli": "~15.2.8","@angular/compiler-cli": "^15.2.0","@types/jasmine": "~4.3.0","jasmine-core": "~4.5.0","karma": "~6.4.0","karma-chrome-launcher": "~3.1.0","karma-coverage": "~2.2.0","karma-jasmine": "~5.1.0","karma-jasmine-html-reporter": "~2.0.0","typescript": "~4.9.4"}}

内容的提问来源于stack exchange，提问作者AVB