升级到 Angular 12 后，所有材料成分都是“未知元素”答案

【问题标题】：after upgrading to angular 12, all material components are "not a known element"升级到 Angular 12 后，所有材料成分都是“未知元素”
【发布时间】：2021-05-21 08:44:55
【问题描述】：

升级到 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）中，一切正常。感谢您的帮助。

【问题讨论】：

同样的事情也发生在我身上。你设法解决了这个问题吗？
如果我没记错的话，我必须从我的登录组件中删除所有材料组件。例如，当我的登录组件中有 mat-card 时，编译失败。
在我的例子中，有一个“基础组件”，所有其他组件都扩展了 - 但是这个 BaseComponent 被注释了 @Injectable() 并且在 angular 12 上这不再起作用了。我将其更改为 @Component({template:""}) 并解决了问题。

标签： angular angular-material upgrade angular12

【解决方案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 你现在没有严格模式。当所有的问题都解决了，你现在有了一个工作项目，你可以创建一个具有严格模式的新项目。

:)-|--|-(:

【讨论】：

【解决方案2】：

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

如果是，

创建一个共享模块，

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

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

如果没有，那我猜你做的是对的。

【讨论】：