2

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?

Don Chambers
  • 3,798
  • 9
  • 33
  • 74
  • 1
    NgFor directive belongs to CommonModule that is imported from BrowserModule, maybe you should import BrowserModule on ListingSharedModule – Alcruz Nov 10 '16 at 20:27
  • CommonModule at the api reference https://angular.io/docs/ts/latest/api/common/index/CommonModule-class.html – Alcruz Nov 10 '16 at 20:28
  • I have CommonModule as an import. I left them out for brevity. I'll update the post. Basically, it was working, then I removed MemberCountryFilter and replaced it with that FilterModule and it stopped working. I didn't want to clutter the post with a lot of unrelated items. – Don Chambers Nov 10 '16 at 20:35

1 Answers1

1

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 { }
Bo Chen
  • 156
  • 9
  • That's the answer. I thought common module just needed to be loaded bu the time it was used, and it was. But now I know it needs to be loaded in the module where it's used. – Don Chambers Nov 11 '16 at 15:12