不导入就无法访问功能模块

时间:2018-11-30 10:12:05

标签: angular angular6 lazy-loading

我们正在使用Angular6构建MEAN Web应用程序。 我们有某些功能模块,例如FormGeneratorModule和GridGeneratorModule。

我们想要的是这些应该仅在根appModule中导入一次,并且所有其他子模块都应该可以直接访问它,即不必将它们导入要使用它们的每个子模块中。

我已经对此进行了研究,并相应地实现了这些功能模块(导出了将要使用的组件以及所有内容)。我还在我的根模块中导入了BrowserModule,并在所有子模块中导入了CommonModule(用于延迟加载)。但这似乎仍然不起作用,每当我在其他模块中使用这些功能模块时,我仍然必须导入这些功能模块。这是完全不希望的,因为它们是非常繁重的模块。

作为参考,我在此处放置一些代码段:

根AppModule.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule as NgController, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { HomeComponent } from '@L3Modules/default/controllers/home/home.component';
import { FormsModule } from '@L3Modules/default/controllers/forms/forms.module';
import { FormGeneratorModule } from '@L3Modules/core/controllers/formGenerator/formGenerator.module';
import { GridGeneratorModule } from '@L3Modules/core/controllers/gridGenerator/gridGenerator.module';


const routing: ModuleWithProviders = RouterModule.forRoot(routes);
@NgController({
  declarations: [
    HomeComponent
  ],
  imports: [
    BrowserModule,
    routing,
    HttpClientModule,
    BrowserAnimationsModule,
    FormsModule,
    FormGeneratorModule,
    GridGeneratorModule,
    NgbModule.forRoot()
  ]
})

功能模块:

formGenerator.module.ts

@NgModule({
imports: [
    CommonModule,
    ReactiveFormsModule,
    routing,
    NgbModule,
],
declarations: [
    FormGeneratorComponent,
   ...
],
exports: [
    ...ALL the components
],
entryComponents: [
    BComponent,
    AComponent,
    DComponent,
    ...

],
providers: [DService],
schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]

gridGenerator.module.ts

declarations : [
    ChComponent,
    PUComponent,
    DTComponent,
],
imports : [
    CommonModule,
    ReactiveFormsModule,
    NgbModule,
    FormsModule
],
exports: [DTComponent],
providers: [],
entryComponents: [],
schemas: [NO_ERRORS_SCHEMA]

如果有人能在这里为我提供一些帮助,那太好了,为了避免在使用它们的每个模块中导入这些巨型功能模块,我想不到我缺少的东西。预先感谢。

1 个答案:

答案 0 :(得分:0)

您可以简单地将AppModule导入每个功能模块:

formGenerator.module.ts gridGenerator.module.ts

import { AppModule } from './../app.module';

@NgModule({
  imports: [
    AppModule
    ...
  ]

值得一提的是,这样做没有性能上的优势