将 Angular 版本 15 迁移到 16 后，面临更多组件和材料组件的问题，并抛出错误 NG8001 - NG8004

Question

将 Angular 从版本 15 迁移到版本 16 后，用户创建的组件和 Material 组件抛出以下错误：

错误NG8001：“组件名称”不是已知元素（材质组件和用户创建的组件）

错误 NG8002： 无法绑定到“ngClass”，因为它不是“div”的已知属性。

错误 NG8002： 无法绑定到“ngModel”，因为它不是“textarea”的已知属性。

错误 NG8002： 无法绑定到“showCustomerFeedback”，因为它不是“app-session-properties”的已知属性。

错误 NG8002： 无法绑定到“dataSource”，因为它不是“table”的已知属性。

错误 NG8003： 未找到带有 exportAs 'matMenu' 的指令。

错误 NG8004： 未找到名为“date”的管道。

我已按照文档配置了 app.module.ts 文件，但所有 Material 和用户创建的组件都存在这些问题。

您能为这些问题提供解决方案吗？

环境：

Angular CLI: 16.0.0
Node: 18.20.5
Package Manager: npm 10.8.2
OS: darwin arm64

Angular: 16.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... fire, forms, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.0
@angular-devkit/build-angular   16.0.0
@angular-devkit/core            16.0.0
@angular-devkit/schematics      16.0.0
@schematics/angular             16.0.0
rxjs                            6.6.7
typescript                      5.0.4

Package.json

"dependencies": {
    "@angular-material-components/datetime-picker": "^16.0.1",
    "@angular-material-components/moment-adapter": "^16.0.1",
    "@angular/animations": "16.0.0",
    "@angular/cdk": "16.0.0",
    "@angular/common": "16.0.0",
    "@angular/compiler": "16.0.0",
    "@angular/core": "16.0.0",
    "@angular/fire": "^16.0.0",
    "@angular/forms": "16.0.0",
    "@angular/material": "16.0.0",
    "@angular/platform-browser": "16.0.0",
    "@angular/platform-browser-dynamic": "16.0.0",
    "@angular/router": "16.0.0",
    "@splunk/otel-web": "^0.19.3",
    "1password-cli": "^0.2.1",
    "ag-grid-angular": "32.0.1",
    "ag-grid-community": "32.0.1",
    "angular-shepherd": "16.0.0",
    "aws-iot-device-sdk-v2": "^1.9.0",
    "aws-sdk": "^2.1279.0",
    "crypto-js": "~4.2.0",
    "firebase": "~9.8.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "ng-lint-staged": "^12.0.4",
    "ngx-cookie-service": "16.0.0",
    "ngx-spinner": "~16.0.2",
    "openvidu-angular": "2.30.0",
    "openvidu-browser": "2.30.0",
    "process": "^0.11.10",
    "redux-observable": "^2.0.0",
    "rxjs": "~6.6.7",
    "tslib": "~2.0.0",
    "util": "^0.12.4",
    "zone.js": "~0.13.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "16.0.0",
    "@angular-eslint/builder": "16.0.0",
    "@angular-eslint/eslint-plugin": "16.0.0",
    "@angular-eslint/eslint-plugin-template": "16.0.0",
    "@angular-eslint/schematics": "16.0.0",
    "@angular-eslint/template-parser": "16.0.0",
    "@angular/cli": "16.0.0",
    "@angular/compiler-cli": "16.0.0",
    "@angular/language-service": "16.0.0",
    "@commitlint/cli": "^17.1.2",
    "@commitlint/config-conventional": "^17.1.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~12.11.1",
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@typescript-eslint/parser": "^5.59.2",
    "cypress": "~13.0.0",
    "eslint": "^8.39.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^8.0.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.5.0",
    "karma-junit-reporter": "~2.0.1",
    "lint-staged": "^13.0.3",
    "prettier": "^2.7.1",
    "prettier-eslint": "^15.0.1",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "typescript": "~5.0.4"
  },

需要在运行时修复上述问题

ng serve

Answer 1

在您的 app.module.ts 或任何发生错误的功能模块中，确保导入所有必需的组件。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';  // check that it is imported from  @angular/common

@NgModule({
    imports: [
      CommonModule, // include CommonModule to use directives like "ngClass"
      // ... other module imports
],
    declarations: []
})
export class AppModule { }

此外，如果您使用独立功能，每个组件都必须导入自己所需的模块。

@Component({
  selector: 'app-my-component',
  templateUrl: './app-my-component.html',
  styleUrls: ['./app-my-component.scss'],
  standalone: true, 
  imports: [CommonModule]
})