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

my component, listingcomponent, uses component called membercountryfilter. have module , working.

@ngmodule({     imports: [commonmodule, routermodule, formsmodule, reactiveformsmodule],     declarations: [listingcomponent, membercountryfilter],     exports: [listingcomponent,membercountryfilter,],     providers: []  }) export class listingcomponent { } 

i have realized module need membercountryfilter component refactored. created module, membercountryfilter component, , want import other modules.

@ngmodule({     imports: [],     declarations: [membercountryfilter],     exports: [membercountryfilter],     providers: [] }) export class filtermodule { } 

i changed original module this:

@ngmodule({     imports: [commonmodule, routermodule, formsmodule, reactiveformsmodule, filtermodule],     declarations: [listingcomponent],     exports: [listingcomponent, filtermodule,],     providers: []  }) export class listingcomponent { } 

after doing vague template parse errors this:

zone.js:355 unhandled promise rejection: template parse errors: can't bind 'ngforof' since isn't known property of 'ul'. ("]*ngfor="let smc of selectedmembercountries">

it appears listingcomponent not know membercountryfilter is. there don't understand modules. have read documentation , think doing correctly.

the export in filtermodule should make membercountryfilter available. import in listingsharedmodule, , export should make available listingcomponent.

for basic overview, had membercountryfilter declaration (with export) , worked. moved module, import , export module not work.

what missing?

i had similar error before, happen me missed import { commonmodule } '@angular/core' in *.module.ts file, filtermodule, please try this:

import { commonmodule } '@angular/core'; @ngmodule({     imports: [commonmodule],     declarations: [membercountryfilter],     exports: [membercountryfilter],     providers: [] }) export class filtermodule { }