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

【问题标题】：cannot access feature modules without importing不导入就无法访问功能模块
【发布时间】：2019-05-02 11:34:36
【问题描述】：

我们正在使用 Angular6 构建一个 MEAN Web 应用程序。我们有某些功能模块，比如说 FormGeneratorModule 和 GridGeneratorModule。

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

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

作为参考，我在这里放了一些代码 sn-ps：

根 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]

如果有人可以在这里帮助我，那就太好了，我想不出我缺少的东西，以避免在每个使用它们的模块中导入这些巨大的功能模块。提前致谢。

【问题讨论】：

这就是 Angular 模块结构的工作原理，如果您将它们导入同一应用程序的多个模块中并没有什么区别，因为 webpack 会将其移动到一个块中以供代码重用。
那你想说什么？那么如果将同一个模块导入到 5 个不同的模块中，是否与将其导入到一个根应用程序模块中一样？是否类似于 require 在 Node 中通过在模块第一次加载时对其进行缓存来工作？
代码只添加到你的包中一次，即使你导入模块 100 次。（在某些情况下，代码会被多次添加，但您的情况并非如此）
好的，那么这不是性能问题。我仍在寻找一种避免在每个模块中导入它们的方法

标签： angular angular6 lazy-loading

【解决方案1】：

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

formGenerator.module.ts 或 gridGenerator.module.ts

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

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

值得注意的是，这样做并没有性能优势

【讨论】：