我已将 Angular 版本 8、9、10 升级到 16。收到此错误 NG8001：“mat-icon”不是已知元素

Question

我已将 Angular 版本 8、9、10 升级到 16。在 Angular 16 上面临以下问题。我已经导入了模块文件中的所有材质模块。然后它也给出了错误。

为了解决这个问题。我尝试了以下事情

• 导入所需模块文件中的所有模块
• 在架构下添加了 CUSTOM_ELEMENTS_SCHEMA。
• 删除node模块文件夹和pacakge-lock.json文件并重新安装。
• 清除缓存
• tsconfig.json 已更新。

错误：src/app/pages/layout/top-header/top-header/top-header.component.html:160:13 - 错误 NG8001：“mat-icon”不是已知元素：

如果“mat-icon”是 Angular 组件，则验证它是否是该模块的一部分。 如果“mat-icon”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。 错误：src/app/pages/layout/top-header/top-header/top-header.component.html:158:9 - 错误 NG8001：“mat-sidenav-container”不是已知元素：

如果“mat-sidenav-container”是 Angular 组件，则验证它是否是该模块的一部分。 如果“mat-sidenav-container”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。

Answer 1

如果顶部标题组件是独立的，请将

MatIconModule

添加到导入数组中。

@Component({
    standalone: true,
    imports: [
      ...
      MatIconModule,
      ...
    ],
    ...
})
export class TopHeaderComponent {
    ...

如果任务不是独立的，请转到声明组件

declarations

数组的位置。然后导入

MatIconModule

。

@NgModule({
    ...
    imports: [
      ...
      MatIconModule,
      ...
    ]
    ...
})
export class SomeModule {}

Answer 2

首先您应该需要在此处验证升级指南中的步骤： https://angular.dev/update-guide

升级 Angular 时，请验证您是否还需要升级 Angular Material，检查

MatIconModule

是否有任何重大更改。我想您还没有使用独立组件，因此您需要将

MatIconModule

放在组件的正确模块中。通常，当您升级 Angular 并且某些模块被重命名或移动到新路径时，会发生此错误。一一验证并相应更新导入。