【问题标题】:why are many of the Material elements giving this error? - "Not a known element"为什么许多 Material 元素会出现此错误? - \"不是已知元素\"
【发布时间】:2023-01-30 02:15:31
【问题描述】:

我继承了这个应用程序,我正在升级到各种角度版本,我得到了可怕的材料项目“不是已知元素”

ERROR in ADMIN/afterhours-config/afterhours-config.component.html:3:5 - error NG8001: 'mat-card' is not a known element:

我查看了其他各种问题和答案,我很想说他们已经解决了我的问题,但我在这里......

在我的 admin.module.ts 中:

import { AfterhoursConfigComponent } from './afterhours-config/afterhours-config.component';
import { MaterialModule } from '../material.module';

@NgModule({
  imports: [
    NgModule,
    MaterialModule...]

  declarations: [
      AfterhoursConfigComponent,...]

不知道我还缺少什么。我确实看到了关于 LazyLoading 的评论......老实说,我不知道应用程序是否正在这样做。我不知道从这里去哪里!应用程序中到处都有大量此类错误(但不是每个材料元素?)...

材料.module.ts:

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  exports: [
    NgModule,
    A11yModule,
    CdkAccordionModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    OverlayModule,
    PortalModule,
    ScrollingModule
  ]
})
export class MaterialModule {}

【问题讨论】:

  • 我不是 Angular 开发人员,所以这可能不是这里的出路,但是首先切换两个 @import from ... 会解决您的问题吗?
  • 你能告诉我们 material.module.ts 长什么样吗?我怀疑那里缺少什么东西。
  • @kellermat - 添加。如您所见,包含了 matcard 模块。如果您看到我应该添加的内容,请告诉我。

标签: angular angular-material


【解决方案1】:

根据您更新的版本,它们改变了某些模块的导入方式,我会转到该特定模块的文档或查看https://update.angular.io/ 并查看版本之间的更改。

【讨论】:

    猜你喜欢
    • 2019-06-18
    • 2017-07-27
    • 1970-01-01
    • 1970-01-01
    • 2020-07-02
    • 2018-02-20
    • 1970-01-01
    • 1970-01-01
    • 2018-04-10
    相关资源
    最近更新 更多