angular - 升级到angular 12后,所有 Material 成分都是 "not a known element"

标签 angular angular-material upgrade angular12

升级到 Angular 12 后,虽然我在 app.module.ts 中有所有必需的代码,但无法识别所有 Material 标签:例如,对于 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'

  • 所有 Material 标签(mat-icon、mat-table、mat-label ..)都存在同样的问题。
    在以前的版本(Angular 9)中,一切正常。
    感谢帮助。

    最佳答案

    注 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您现在没有严格模式。
    当所有问题都解决了并且您现在有一个工作项目时,您可以创建一个具有严格模式的新项目。
    :)-|-< 如果答案有用请投票 +1 >-|-(:

    关于angular - 升级到angular 12后,所有 Material 成分都是 "not a known element",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67633554/

    相关文章:

    javascript - Angular2 在 Component.js 中使用管道

    angular - 通过单击按钮重置垫选择值

    angular - 模板解析错误 : 'md-form-field' is not a known element

    Angular 4 如何禁用 Angular Material 选项卡组中的选项卡导航?

    docker - 不需要的升级ElasticSearch版本

    mysql 5.5升级-性能损失较大

    html - 如何让用户可以根据自己的需要定制网站?

    javascript - Angular 库应该用 typescript 编写还是编译为 javascript

    javascript - 谷歌地图更新时显示灰色叠加层

    performance - 在单台 PC 上确定编译性能硬件瓶颈的最简单方法?