問題

アプリケーションのルートに小さなコンポーネント(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と呼ばれます。だから私は私のButtonsModuleAppModuleをインポートしようとしました。しかし、私はエラーが発生しています: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 { } 

私はあなたの中にはすでにここでいくつかの失敗を認識している人もいると思います:)しかし、最後にそれを読んでください。

私はここでのベストプラクティスは、共有モジュールを作成し、これをAppModuleButtonsModuleにインポートすることですが、これは少し残酷なようです。このような小さなコンポーネントのためだけでなく、ここで私の唯一の共有モジュールでもあります。また、多くのオーバーヘッドを作成します。

私の質問:

  • 私はここで何か間違っているのですか?はいの場合、それは何ですか?
  • 共有モジュールを作成することで、正しいモジュールになりますか?
  • 私のアプローチが機能しないのはなぜですか?つまり、Angularのフードの下で私のアプローチを禁止しているのはなぜですか?

  ベストアンサー

ngModulesは、アプリケーションをcohesiveブロックに整理するのに役立ちます 機能です。

すべてのAngularアプリにはルートモジュールクラスがあります。規約によって、ルート モジュールクラスはAppModuleと呼ばれ、 app.module.ts。

同じモジュールを2回インポートするとどうなりますか?

それは問題ではありません。 3つのモジュールがすべてモジュール 'A'をインポートすると、 角度はモジュール 'A'を一度評価し、初めてそれに遭遇したときに、 二度としない

これは、どのレベルのAが輸入された階層に現れても当てはまります モジュール。モジュール 'B'がモジュール 'A'をインポートすると、モジュール 'C'は 'B'をインポートします。 モジュール 'D'は[C、B、A]をインポートし、 'D'は 'C'は 'A'と評価される 'B'の評価を引き起こします。いつ Angularは 'D'の 'B'と 'A'に到達し、すでにキャッシュされており、 準備はいいか?

Angularは循環参照を持つモジュールが好きではないので、 モジュール 'A'をインポートするモジュール 'B'。

リンク

最後のすべてがメインアプリケーションモジュールにコンパイルされ、同じモジュールで再度インポートすると、上記の条件が循環依存関係に当てはまります。そして、メインモジュールであるため、理想的には他のモジュールで使用するエクスポートはありません。

  同じタグがついた質問を見る

angularangular-module