时间戳

首页 > 解决方案 > MaterialModule 在某些模块中不起作用：'mat-card' 不是已知元素

angular - MaterialModule 在某些模块中不起作用：'mat-card' 不是已知元素

问题描述

我发现了类似的问题，但似乎都不是我遇到的问题。

目前我的应用程序使用延迟加载的 postModule，而其他模块正常加载。它们都使用 Angular Material，我已将其添加到 materialModule 中。我的 materialModule 的使用适用于我的 postModule 组件，但它不适用于我的 aboutModule（可能还有其他模块）。

对于代码量，我深表歉意。我对 Angular 很陌生，我不确定从哪里开始寻找这个问题。

关于模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from '../material/material.module';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [AboutComponent],
  imports: [
    CommonModule,
    MaterialModule
  ]
})
export class AboutModule { }

材料模块

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import {
  MatListModule,
  MatCardModule,
  MatIconModule,
  MatMenuModule,
  MatButtonModule,
  MatToolbarModule,
  MatSidenavModule,
  MatTableModule,
  MatFormFieldModule,
  MatInputModule,
  MatProgressSpinnerModule
} from "@angular/material";
import { FlexLayoutModule } from "@angular/flex-layout";

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatListModule,
    //other Mat imports
  ],
  exports: [
    MatListModule,
    //Rest of the imports
  ]
})
export class MaterialModule {}

应用程序模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { LayoutModule } from '@angular/cdk/layout';
import { MaterialModule } from './material/material.module';
import { AppRoutingModule } from './app-routing.module';
import { httpInterceptorProviders } from './http-interceptors';
import { MainNavComponent } from './main-nav/main-nav.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found/page-not-found.component';


@NgModule({
  declarations: [AppComponent, MainNavComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    ReactiveFormsModule,
    LayoutModule,
    MaterialModule,
    AppRoutingModule
  ],
  providers: [httpInterceptorProviders],
  bootstrap: [AppComponent]
})
export class AppModule {}

应用程序路由模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SelectivePreloadStrategy } from './selective-preload-strategy';
import { AuthGuard } from './user/auth.guard';
import { AboutComponent } from './about/about/about.component';
import { MapComponent } from './map/map/map.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found/page-not-found.component';
import { NewsComponent } from './news/news/news.component';


const appRoutes: Routes = [
  {
    path: 'post',
    canActivate: [AuthGuard],
    loadChildren: './post/post.module#PostModule',
    data: { preload: true }
  },
  {path: '', redirectTo: 'post/list', pathMatch: 'full'},
  {path: 'about', component: AboutComponent},
  {path: 'news', component: NewsComponent},
  {path: 'map', component: MapComponent},
  {path: '**', component: PageNotFoundComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes,
      {preloadingStrategy: SelectivePreloadStrategy}),
  ],

  declarations: [
    AboutComponent,
    NewsComponent,
    MapComponent,
    PageNotFoundComponent
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

标签： angularimportmoduleangular-material

解决方案

您没有加载“aboutModule”，您只是在导入组件。我建议您为“aboutModule”创建一个路由模块，该模块将处理其子模块，然后像您在帖子中所做的那样加载您的路由模块。

推荐阅读