Angular 2 final version - ngModule does not recognize shared component

Question

I am having problems with the configuration for ngModule and my components, running final released version of Angular 2.

this is what I have:

//PageHeaderModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PageHeaderComponent } from './index';


@NgModule({
  imports: [CommonModule],
  declarations: [PageHeaderComponent]
})


export class PageHeaderModule { }

//Shared Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { Routes, RouterModule } from '@angular/router';

import { HeaderComponent, SideBarComponent, BurgerMenuComponent, FooterComponent, InnerSpinnerComponent, PageHeaderComponent  } from "./components/index";
import { UniqueNameValidationByList } from "./directives/index";
import { LowerCasePipe, WhitespacePipe } from "./pipes/index";

@NgModule({
    imports: [CommonModule, RouterModule],
    declarations: [
        PageHeaderComponent,
        HeaderComponent,
        SideBarComponent,
        BurgerMenuComponent,
        FooterComponent,
        InnerSpinnerComponent,
        UniqueNameValidationByList,
        LowerCasePipe, WhitespacePipe
    ],
    exports: [
        PageHeaderComponent,
        HeaderComponent,
        SideBarComponent,
        BurgerMenuComponent,
        FooterComponent,
        InnerSpinnerComponent,
        UniqueNameValidationByList,
        LowerCasePipe, WhitespacePipe
    ],
})

export class SharedModule { }

//AppModule 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { routing, appRoutes }  from './app.routes';
import { AppComponent }   from './app.component';


import { BillingModule }  from './billing/billing.module';
import { CustomersModule }  from './customers/customers.module';
import { DashboardModule }  from './dashboard/dashboard.module';
import { DevicesModule }  from './devices/devices.module';
import { GroupsModule }  from './groups/groups.module';
import { ProductsModule }  from './products/products.module';
import { ReportingModule }  from './reporting/reporting.module';
import { LoginModule }  from './login/login.module';

import { SharedModule } from "./shared/shared.module";


import { SideBarService } from "./shared/components/index";
import { SignalRService, CountriesService } from "./shared/services/index";


@NgModule({
    imports: [BrowserModule,
        RouterModule.forRoot(appRoutes, { useHash: true }),
        routing,
        SharedModule,
        BillingModule,
        CustomersModule,
        DashboardModule,
        DevicesModule,
        GroupsModule,
        ProductsModule,
        ReportingModule,
        LoginModule
    ],
    declarations: [AppComponent],
    providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy },
        SideBarService,
        SignalRService,
        CountriesService],
    bootstrap: [AppComponent],
}) 

export class AppModule { }

Notice 2 things in here:

1) I am not using page header module because I think that the sharedModule should take care about all those shared components, instead create one by one, but I am not sure.

2) I just use 'exports' in the shared module, not in any of the rest of the modules within my app

The error I am getting is this one:

I have been trying many things, but nothing seems to solve my problem, I would really appreciate whatever help you can provide.

If more info needed, please just let me know.

Thanks

I had same issue. I have spent all night. You need to inject explicitly CommonModule and FormsModule to each module where you are using ngModel/ngIf etc... — Ihor Pavlyk, Oct 07 '16 at 10:27

score 0 · Answer 1 · answered Dec 11 '16 at 10:10

I'm not sure which module is using PageHeaderComponent but you need to understand that you need to import SharedModule inside the actual modules using components from it, not in your root module which I'm guessing is what you're doing.

I can see why you think that would work, since this is the way modules work for providers (where you import a module with providers in your root module, and can inject providers from it throughout child modules)

Here's a part I found in angular docs that I hope is helpful:

Modules do not inherit access to the components, directives or pipes that are declared in other modules. What AppModule imports is irrelevant to ContactModule and vice versa. Before ContactComponent can bind with [(ngModel)], its ContactModule must import FormsModule.

Angular 2 final version - ngModule does not recognize shared component

1 Answers1