Question

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

当前，我的应用程序使用的是postModule，它是延迟加载的，而其他模块则是正常加载的。它们都使用Angular Material，我已将其添加到materialModule中。我的materialModule可以很好地用于我的postModule组件，但不适用于aboutModule（以及其他模块）。

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

AboutModule

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 { }

MaterialModule

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 { }

Answer 1

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

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

1 个答案: