在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中定义的应用程序无法识别子模块组件):

无法绑定到"标签",因为它不是"标签栏"的已知属性.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 { }