web-dev-qa-db-ja.com

Angular 2（RC5）での複数のカスタムモジュールの利用

増え続けるng2アプリをRC5にアップグレードし、すべてのコンポーネント/パイプを1つの太いメインモジュールに配置しました。膨らみと戦うために、私は自分のアプリを個別のモジュールに分割しようとしました（これもまた、最終的に遅延読み込みを行うことを目指しています）。

以下は、いくつかのユニバーサルコンポーネントを含む、私が作成したサブモジュールです。

my-shared.module.ts

import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { provideForms, disableDeprecatedForms } from"@angular/forms";

import { TabBarWidgetComponent } from "./tabBarWidget/tabbar-widget.component";
import { MyDatepickerComponent } from "./mykDatePicker/my-datepicker.component";
import { CalendarSelectorComponent } from "./calendarSelector/calendar-selector.component";
import { AccordionTabComponent } from "./accordionTab/accordion-tab.component";


@NgModule({
  imports: [
      BrowserModule,
      FormsModule
  ],
  declarations: [
      TabBarWidgetComponent,
      MyDatepickerComponent,
      CalendarSelectorComponent,
      AccordionTabComponent

  ],
  providers: [
      provideForms(),
      disableDeprecatedForms()
  ]

})
export class MySharedModule { }

ここまでは順調ですね。今、私はメインのapp.module.tsでこのMySharedModuleを参照したいと思っています、そして私はこのようなことをしています：

import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";

import { MySharedModule } from "./shared/my-shared.module";

import { Some1Component } from "./folder/some1.component";
import { Some2Component } from "./folder/some2.component";
import { Some3Component } from "./folder/some3.component";
import { Some4Component } from "./folder/some4.component";
import { Some5Component } from "./folder/some5.component";

import "rxjs/add/operator/map";
import "rxjs/add/operator/toPromise";

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MySharedModule
  ],
  declarations: [
    AppComponent,
     Some1Component,
     Some2Component,
     Some3Component,
     Some4Component,
     Some5Component,

  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: []

})
export class AppModule { }

問題は、次のエラーが発生することです（app.module.tsで定義されているように、サブモジュールコンポーネントがアプリによって認識されていないことを示唆しています）。

「タブバー」の既知のプロパティではないため、「タブ」にバインドできません。 1. 'tab-bar'がAngularコンポーネントであり、 'tabs'入力がある場合、それがこのモジュールの一部であることを確認してください。2. 'tab-bar'がWebの場合次に、コンポーネントはこのコンポーネントの「@ NgModule.schema」に「CUSTOM_ELEMENTS_SCHEMA」を追加して、このメッセージを抑制します。

誰かが私が間違っていることを見ることができますか？

angularangular-module
11
brando

共有モジュールにexportsセクションを追加してみてください。

import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { provideForms, disableDeprecatedForms } from"@angular/forms";

import { TabBarWidgetComponent } from "./tabBarWidget/tabbar-widget.component";
import { MyDatepickerComponent } from "./mykDatePicker/my-datepicker.component";
import { CalendarSelectorComponent } from "./calendarSelector/calendar-selector.component";
import { AccordionTabComponent } from "./accordionTab/accordion-tab.component";


@NgModule({
  imports: [
      BrowserModule,
      FormsModule
  ],
  exports: [
      TabBarWidgetComponent,
      MyDatepickerComponent,
      CalendarSelectorComponent,
      AccordionTabComponent
  ],
  declarations: [
      TabBarWidgetComponent,
      MyDatepickerComponent,
      CalendarSelectorComponent,
      AccordionTabComponent
  ],
  providers: [
      provideForms(),
      disableDeprecatedForms()
  ]

})
export class MySharedModule { }
28
John Siu

コンポーネントの順序を変更してみてください link 詳細を確認してください

プログラムに5つのコンポーネントABCD Eがあるかどうかを検討します。たとえば、コンポーネントAがテンプレートでコンポーネントBを使用し、コンポーネントBがテンプレートでコンポーネントCを使用している場合、これらのコンポーネント間の依存関係はA-> Bになります。 、B-> C、C-> D、D-> E、E-> F。この場合、それらを宣言にリストする正しい順序は宣言です：[E、D、C、B、A]。

1
rashfmnb