Utilizing Multiple Custom Modules in Angular 2 (RC5)

Question

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).

Here is a sub-module I have created that contains some universal components:

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 { }

So far so good. Now I want to reference this MySharedModule in the main app.module.ts and I am doing something like this:

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 { }

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):

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.

Can anyone see what I am doing wrong?

Flavoring

Answer 1

Try add exports section in share module.

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 { }

Tractile

Answer 2

try changing the order of component check this link for more detail

consider if you had five components in your program, A B C D E. If for example component A used component B in its template, and component B used component C in its template, and so on, then the dependencies between these components are A->B, B->C, C->D, D->E, E->F. In this case the correct order to list them in the declarations would be declarations: [E, D, C, B, A].

Beyrouth

I have run across this bug when building for production, and you might be right, this could be the problem. But I have so many component dependencies at this point that I don't have time/patience to weed through it. Will just have to wait for the bug fix in RC6. – Flavoring

i was thinking the same in start but implemented it – Beyrouth

Regarding the ordering of declared components: github.com/angular/angular/issues/10618 – Flavoring

i mentioned that in my answer – Beyrouth