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

Question

我已将 Angular 版本 8、9、10 升级到 16。在 Angular 16 版本上面临以下问题。我已经导入了模块文件中的所有材质模块。然后它也会给出错误。请找到这里我添加了错误和屏幕截图。

这是关键问题，我们陷入困境。您能尽快提供解决方案吗？

为了解决这个问题。我尝试了下面的想法

导入所需模块文件中的所有模块 在架构下添加了 CUSTOM_ELEMENTS_SCHEMA。 删除节点模块文件夹和 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”以抑制此消息。** 图片*

在此输入图片描述

谢谢， 奇兰坦·帕特尔

为了解决这个问题。我尝试了下面的想法

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

Answer 1

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

MatIconModule

添加到导入数组中。

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

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

declarations

数组的位置。然后导入

MatIconModule

。

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