angular - 升级到 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' 不是已知元素：

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

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

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

score 2 · Accepted Answer

注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-ignore此外，如果您在 ts 文件中看到一些错误，您现在可以通过在错误行顶部使用来抑制（忽略）它们。

注4

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

添加@Injectable()在类声明之上。

注5

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

:)-|-< 如果答案有用请投票 +1 >-|-(:

score 1 · Accepted Answer

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

如果是，

创建一个共享模块，

在共享模块中导入和导出所有材料模块，

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

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

2 回答 2