CODEWITHSUNDEEP
angularangular2-modules
Don Chambers
Don Chambers

Reputation: 4251

Angular2 - How does my module import and use another module?

My component, ListingComponent, uses a component called MemberCountryFilter. I have this module and everything is working.

@NgModule({
    imports: [CommonModule, RouterModule, FormsModule, ReactiveFormsModule],
    declarations: [ListingComponent, MemberCountryFilter],
    exports: [ListingComponent,MemberCountryFilter,],
    providers: []

})
export class ListingComponent { }

I have realized that another module will soon need the MemberCountryFilter component so I refactored. I created this module, for the MemberCountryFilter component, and I want to import it into other modules.

@NgModule({
    imports: [],
    declarations: [MemberCountryFilter],
    exports: [MemberCountryFilter],
    providers: []
})
export class FilterModule { }

I changed my original module to this:

@NgModule({
    imports: [CommonModule, RouterModule, FormsModule, ReactiveFormsModule, FilterModule],
    declarations: [ListingComponent],
    exports: [ListingComponent, FilterModule,],
    providers: []

})
export class ListingComponent { }

After doing this I get vague template parse errors like this:

zone.js:355 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngForOf' since it isn't a known property of 'ul'. ("]*ngFor="let smc of selectedMemberCountries">

It appears that ListingComponent does not know what MemberCountryFilter is. Obviously there is something I don't understand about modules. I have read the documentation and I think I am doing it correctly.

The export in FilterModule should make MemberCountryFilter available. Then I import it in ListingSharedModule, and export it which should make it available to ListingComponent.

For a basic overview, I had MemberCountryFilter as a declaration (with export) and it worked. I moved it into another module, then import and export that module but it does not work.

What am I missing?

Upvotes: 2

Views: 6218

Answers (1)

Bo Chen
Bo Chen

Reputation: 156

I had similar error before, what happen to me was I missed import { CommonModule } from '@angular/core' in my *.module.ts file, for your FilterModule, please try this:

import { CommonModule } from '@angular/core';
@NgModule({
    imports: [CommonModule],
    declarations: [MemberCountryFilter],
    exports: [MemberCountryFilter],
    providers: []
})
export class FilterModule { }

Upvotes: 1

Related Questions