升级到 Angular 12 后，所有材质成分都是“不是已知元素”

Question

升级到 Angular 12 后，虽然我在 app.module.ts 中有所有必需的代码，但所有材质标签都无法识别：例如，对于 mat-checkbox，我在 app.module.ts 中有以下内容

import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
    imports: [
    BrowserModule,  
    MatCheckboxModule,

并在执行时：

“mat-checkbox”不是已知元素：

1. 如果“mat-checkbox”是 Angular 组件，则验证它是否是该模块的一部分。
2. 如果“mat-checkbox”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”

所有材质标签（mat-icon、mat-table、mat-label ......）都有同样的问题。

在之前的版本（Angular 9）中，一切正常。感谢帮助。

Answer 1

注1（致命问题）

您正在使用延迟加载。在你的项目中的某个地方，你有延迟加载的旧语法

{
  ...
  loadChildren: 'path/to/your.module#YourModule'
}

将项目中的所有内容替换为：

{
  ...
  loadChildren: () => import('path/to/your.module').then(m => m.YourModule)
}

即使您认为它与您当前的功能无关。这样做之后问题就解决了。

笔记2：

另外，在升级到 Angular12 的过程中，如果某些 npm 包损坏，您可以使用

npm i --save package-name --force

暂时安装它。

注3：

另外，如果您在 ts 文件中看到一些错误，您 // @ts-ignore现在可以通过在错误行顶部使用来抑制（忽略）它们。

注4

另外，如果您看到类似“类正在使用 Angular 功能但未装饰。请添加显式 Angular 装饰器”的错误。

添加@Injectable()在类声明的顶部。

注5

在我的想法中，如果您要从旧版本的 Angular 升级到 Angular 12。 为此，请首先创建一个 ng new APP_NAME --strict=false目前没有严格模式的项目。当所有问题都解决并且您现在有了一个工作项目时，您可以创建一个具有严格模式的新项目。

Answer 2

我假设您有延迟加载的模块。

如果是，

创建一个共享模块，

导入和导出共享模块中的所有材质模块，

在根（应用程序）模块和功能（延迟加载）模块中导入共享模块。

如果不是，那么我想你所做的就是对的。