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?
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 { }
try changing the order of component check this link for more detail
consider if you had five components in your program, ABCD 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].
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.