Two lazy loading modules with common component in Angular 6

Question

I have an structure like

---app.module
-------child1.module
-------child2.module

and I use 1 common component (app-film) in both child modules, I declare that one in app.module, but Angular still show error

Can't bind to 'film' since it isn't a known property of 'app-film'.
1. If 'app-film' is an Angular component and it has 'film' input, then verify that it is part of this module.
2. If 'app-film' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

stackblitz https://stackblitz.com/github/ms-dosx86/films

Answer 1

Nested modules will not see that component which is defined in the parent module (which imports nested ones). You need to create a SharedModule like this

@NgModule({
   declarations: [ AppFilmComponent ]
   exports: [ AppFilmComponent ]
})
export class SharedModule { }

export AppFilmComponent from that module and then import SharedModule module into two child modules separately.

@NgModule({
   ...
   imports: [ SharedModule ]
   ...
})
export class Child1Module { }

and

@NgModule({
   ...
   imports: [ SharedModule ]
   ...
})
export class Child2Module { }