title: Utilizing Multiple Custom Modules in Angular 2 (RC5)
body: <p>I have upgraded an ever-growing ng2 app to RC5 and have plopped all my components/pipes into one fat main module.  To fight against the bloat, I was trying to carve my app into separate modules (also with an eye toward eventually doing lazy loading).   </p>
  
  <p>Here is a sub-module I have created that contains some universal components:</p>
  
  <p>my-shared.module.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>So far so good.  Now I want to reference this MySharedModule in the main app.module.ts and I am doing something like this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is I am getting the following error (which suggests that the sub-module components are not being recognized by the app as defined in app.module.ts):</p>
  
  <blockquote>
    <p>Can't bind to 'tabs' since it isn't a known property of 'tab-bar'.
    1. If 'tab-bar' is an Angular component and it has 'tabs' input, then verify that it is part of this module.
    2. If 'tab-bar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.</p>
  </blockquote>
  
  <p>Can anyone see what I am doing wrong?</p>