在Angular 2中使用多個自定義模塊（RC5）

Question

我已經將一個不斷增長的ng2應用程序升級到RC5，並將所有組件/管道都放到了一個胖主模塊中。爲了應對這種膨脹，我試圖將我的應用分成不同的模塊（也是爲了最終做出延遲加載）。

這裏是一個子模塊，我已經創建了一個包含一些通用的組件：

我-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中定義的應用程序識別）：

由於它不是「tab-bar」的已知屬性，因此無法綁定到「選項卡」。 1.如果'tab-bar'是一個Angular組件並且它有'tabs'輸入，那麼請驗證它是否是該模塊的一部分。 2.如果'tab-bar'是一個Web組件，則將「CUSTOM_ELEMENTS_SCHEMA」添加到此組件的'@ NgModule.schema'中以禁止此消息。

任何人都可以看到我在做什麼錯？

Answer 1

嘗試在共享模塊中添加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 { } 

Answer 2

嘗試改變零件檢查這個link的順序詳細

考慮，如果你有在你的程序五個組成部分，ABCD E.如果 例如成分A在模板中使用的成分B和成分B 在其模板中使用了組件C等，那麼這些組件之間的依賴關係爲：A→B，B→C，C→D，D→E，E→F。在這個 的情況下，在聲明中列出它們的正確順序是 聲明：[E，D，C，B，A]。