My module doesn't see components from app.module

Question

I have my own module (FrameworkModule), which is called in import inside app.module

This is my module:

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    CheckFieldComponent,
  ],
  exports: [
    CheckFieldComponent,
  ],
})
export class FrameworkModule { }

If I use any component from app.module, component from FrameworkModule it doesn't see. App.module of course includes my FrameworkModule.

For example: In component xyz (which is defined in my FrameworkModule) I am using zyx component (which is defined in app.module) - then xyz doesn't see zyx component.

And the error:

Can't bind to 'xyz' since it isn't a known property of 'zyx'.

Answer 1

This is by design. If you want to use components from a module, you have to import this module. Your FeatureModule does not (and can not) import your AppModule and so you cannot use components defined in your AppModule.

A common workaround is to create a third module that can be imported in your AppModule and your FeatureModule.

Example:

 AppModule
   imports: ChildModule1

 ChildModule1
   imports: -

 => AppModule can use components from ChildModule1 (and AppModule)
 => ChildModule1 can use only components from ChildModule1

 =====

 AppModule
   imports: ChildModule1

 ChildModule1
   imports: AppModule

 => Not possible, circular dependency

 =====

 AppModule
   imports: ChildModule1, SharedModule1

 ChildModule1
   imports: SharedModule1

 SharedModule1
   imports: -

 => AppModule can use components from ChildModule1 and SharedModule1 (and AppModule)
 => ChildModule1 can use only components from SharedModule1 (and ChildModule1)

Answer 2

In any angular application that is not just an hello world exemple, it would be better to avoid declaring components in the app module.

What Christoph suggested is the best way, make yourself a shared module where you can declare all your components. It might look like a lot of work to do but it is not that much and it's just how angular work. AppModule is the root and it includes everything else, you cannot import it anywhere or you will end up with circular dependencies.

I am building a massive app and the app module itself only declares the app component, no others..

Good luck!