在 Angular X 的子模块中使用来自 AppModule 的组件（X 代表 2+）答案

【问题标题】：Use component from AppModule in a child module in Angular X (X stands for 2+)在 Angular X 的子模块中使用来自 AppModule 的组件（X 代表 2+）
【发布时间】：2018-02-10 10:17:55
【问题描述】：

我在我的应用程序的根目录中创建了一个小组件 (LoadingComponent)，并（显然）在我的 AppModule 中声明了它。该组件在我的应用程序加载时使用，并且应该显示一些精美的加载动画。

现在我想在保存某些内容时在子模块中使用它。但是当我想在另一个模块中使用这个组件时，我总是遇到错误。

我在我的 AppModule 中导出了 LoadingComponent：

import { ButtonsModule } from './buttons/buttons.module';
import { FormsModule } from '@angular/forms';
import { StatusLightsDisplayComponent } from './status-lights-display/status-lights-display.component';
import { StatusLightsContainerComponent } from './status-lights-container/status-lights-container.component';
import { HttpModule } from '@angular/http';
import { ReportsService } from './services/reports.service';
import { BrowserModule } from '@angular/platform-browser';
import { forwardRef, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GeneralInformationComponent } from './general-information/general-information.component';
import { TextfieldsComponent } from './textfields/textfields.component';
import { LoadingComponent } from './loading/loading.component';

@NgModule({
  declarations: [
    AppComponent,
    GeneralInformationComponent,
    TextfieldsComponent,
    StatusLightsContainerComponent,
    StatusLightsDisplayComponent,
    LoadingComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ButtonsModule
  ],
  exports: [
    LoadingComponent
  ],
  providers: [
    ReportsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我要使用LoadingComponent 的模块称为ButtonsModule。所以我尝试在我的ButtonsModule 中导入AppModule。但我得到了错误：Unexpected value 'undefined' imported by the module 'ButtonsModule'

这是我的 ButtonsModule：

import { AppModule } from '../app.module';
import { LoadingComponent } from '../loading/loading.component';
import { BottomComponent } from './bottom/bottom.component';
import { CalendarComponent } from './top/calendar/calendar.component';
import { CommonModule } from '@angular/common';
import { ExportService } from '../services/export.service';
import { forwardRef, NgModule } from '@angular/core';
import { FunctionsComponent } from './functions/functions.component';
import { NavArrowsComponent } from './shared/nav-arrows/nav-arrows.component';
import { SaveButtonComponent } from './shared/save-button/save-button.component';
import { TopComponent } from './top/top.component';

@NgModule({
  imports: [
    CommonModule,
    AppModule
  ],
  exports: [
    TopComponent,
    FunctionsComponent,
    BottomComponent
  ],
  declarations: [
    TopComponent,
    BottomComponent,
    FunctionsComponent,
    NavArrowsComponent,
    SaveButtonComponent,
    CalendarComponent
  ],
  providers: [
    ExportService
  ]
})
export class ButtonsModule { }

我猜你们中的一些人已经认识到这里有些失败了 :) 但请读到最后。

我知道这里的最佳做法是创建一个共享模块，然后将其导入我的 AppModule 和 ButtonsModule，但这似乎有点矫枉过正，只是对于这么小的组件，它也会成为我在这里唯一的共享模块。它还会产生大量开销。

我的问题：

我在这里做错了吗？如果是，是什么？
将是通过创建一个共享模块，正确的方式吗？
为什么我的方法不起作用？我的意思是，在 Angular 的底层，是什么禁止了我的方法，为什么？

【问题讨论】：

做这样的事情完全消除了延迟加载的好处，你必须使用共享模块，这太糟糕了，但它的模块化
但我没有使用延迟加载。所以不可能在我的应用程序的不同模块中使用我的AppModule 中的组件？为什么会这样？
哦，是的，我的错，这就是共享模块出现的地方，问题是所有东西都编译到邮件应用程序模块，再次导入它会产生一种循环依赖，这就是它猜测它没有的原因不行。
是的 AppModule 就像主模块，不应该有导出
更新希望对其他人有所帮助

标签： angular angular-module

【解决方案1】：

NgModules 帮助将应用程序组织成有凝聚力的块功能。

每个 Angular 应用程序都有一个根模块类。按照惯例，根模块类称为 AppModule，它存在于一个名为 app.module.ts.

如果我两次导入同一个模块会怎样？

这不是问题。当三个模块都导入模块'A'时， Angular 评估模块“A”一次，它第一次遇到它，并且不再这样做。

无论 A 级别出现在导入的层次结构中，这都是正确的模块。当模块'B'导入模块'A'时，模块'C'导入'B'，和模块'D'导入[C，B，A]，然后'D'触发评估 'C'，触发评估'B'，评估'A'。什么时候 Angular 到达 'D' 中的 'B' 和 'A'，它们已经被缓存并且准备好了。

Angular 不喜欢带有循环引用的模块，所以不要让模块“A”导入模块“B”，它导入模块“A”。

Link

最后的所有内容都编译到主应用程序模块中，并在同一模块中再次导入它，使上述条件成为循环依赖。作为主模块，理想情况下它不应该有任何导出供其他模块使用。

【讨论】：

【解决方案2】：

创建一个组件模块，它唯一的工作就是收集组件，导出它们，然后在两个地方都导入它。起初这似乎很痛苦，但后来你意识到它有助于组织在哪里使用并将扩展的内容。

【讨论】：