升级到 Angular 12 后，所有材料组件都"not a known element"

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"中

所有材料标签(垫子图标、垫子表、垫子标签…(都有同样的问题。

在以前的版本(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装饰器"；。

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

注5

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

Answer 2

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

如果是，

创建一个共享模块

导入和导出共享模块中的所有物料模块，

在根(app(模块和功能(懒惰加载(模块中导入共享模块。

如果否，我想你所做的是对的。