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?
Yes, you can define multiple modules in angularJS as given below. The modularization in AngularJS helps us to keep the code clarity and easy to understand, as we can combine multiple modules to generate the application.
So, for solving this problem we create a Shared Module instead of sharing a component, now we share this module in all other modules for this we use import statement and import the shared module in all other modules after this the component will gets automatically shared to all the modules.
If you want to use a component across multiple modules, you'll need to create a “shared” module and add that component to the shared module's exports . Then you add that shared module into your other modules imports .
There are two types of modules, root modules and feature modules.
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, 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].
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With