material 元素未在延迟加载中加载

Question

我是 angular 模块和延迟加载的新手。我尝试使用 angular material.

构建延迟加载应用程序

延迟加载对我有用。但是子组件中的 material 元素没有加载

我得到 'mat-tab' is not a known element:

但我在 AppModule 中添加了 MatTabModule，如下所示

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent } from './home/home/home.component';
import { MaterialModule } from './module/material/material.module';
import { MatTabsModule } from '@angular/material/tabs';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTabsModule
    
    
  ],
  providers: [],
  exports:[MaterialModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的惰性模块如下

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { LazyRoutingModule } from './lazy-routing.module';
import { LazyComponent } from 'src/app/lazy/lazy/lazy.component';


@NgModule({
  declarations: [LazyComponent],
  imports: [
    CommonModule,
    LazyRoutingModule
  ]
})
export class LazyModule { }

这个 mat 选项卡在 HomeComponent 上工作，在 lazyComponent 上不工作。

我尝试使用 Stack Blitz，它工作正常，下面是 StackBlitz url

https://stackblitz.com/edit/angular-ivy-rpqusl

请让我知道我在这里缺少什么？

Answer 1

简单的方法

相反，不要在 app.module.ts 中导入，您需要将其导入到您想要的模块中，如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatTabsModule } from '@angular/material/tabs';
import { LazyRoutingModule } from './lazy-routing.module';
import { LazyComponent } from 'src/app/lazy/lazy/lazy.component';


@NgModule({
  declarations: [LazyComponent],
  imports: [
    CommonModule,
    LazyRoutingModule,
    MatTabsModule,
  ]
})
export class LazyModule { }

另一种方法

如果你想将一些模块分组以在你的组件中共享，你可以创建一个 SharedModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatTabsModule } from '@angular/material/tabs';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatTabsModule,
    ~modules that you want to share~
  ],
  exports: [
    MatTabsModule,
    ~modules that you want to share~
  ]
})
export class SharedModule { }

现在您可以在 LazyModule 中导入：

@NgModule({
  declarations: [LazyComponent],
  imports: [
    CommonModule,
    LazyRoutingModule,
    SharedModule,
  ]
})
export class LazyModule { }

material 元素未在延迟加载中加载

material elements are not loading in lazy loading

lazy-loading

angular-material

angular

简单的方法

另一种方法