Share Component between 2 modules

Question

I\'m trying to include a Component in 2 modules (parent and child) but getting various errors in the process

app.module.ts

<         


        

Answer 1

update

imports is only for modules, not components. I doubt it will work out if the app.module exports the shared component. Make it a SharedModule or MyFeatureModule instead and add this module to imports where you want to use the elements the module exports.

original

One component can only be added declarations of exactly one @NgModule()

As workaround create a new module for the component and add the new module to imports: [...] of the other two modules (where you want to use it).

See also https://github.com/angular/angular/issues/11481#issuecomment-246186173

When you make a component part of a module you impart on it a set of rules when it is compiled. Having a component without belonging to a NgModule is meaningless as the compiler can't compile it. Having a component be part of more then one module is also weird as you are saying that depending which module you chose the rules for compiling are different. And when you dynamically load such a component it would be ambiguous which set of compilation rules you wanted.

The idea of removing that each component belongs to exactly one module is a no-go for the reasons stated above.

Answer 2

You have to include the shared component in your providers: section of SharedModule. Then from derived module, you just import SharedModule, and Bingo.

    import { PagingInfoComponent } from './paging/paging.component';

   @NgModule({
      providers: [ PagingInfoComponent ],
      declarations: [ ],
      exports: [ ]
    })

   export class SharedModule {}

And, in your derived module,

import { SharedModule } from '../location/to/shared.module';
@NgModule({
 imports: [SharedModule ]
});

Answer 3

Create a SharedModule. Declare and export the SharedComponent.

shared.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedComponent } from './shared';

 @NgModule({
   declarations: [
     SharedComponent
   ],
   imports: [
     CommonModule
   ],
   exports: [
     SharedComponent
   ],
   providers: [

   ]
 })
 export class SharedModule { }

Import SharedModule in AppModule and any other Modules.

app.module.ts

  import { SharedModule } from './shared.module';
  @NgModule({
    imports: [
      SharedModule
    ]
  })

Answer 4

For completeness, according to Gunter's answer, use a SharedModule:

SharedModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

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

app.module.ts

@NgModule({
    imports: [ChildModule, SharedModule],...
})

child.module.ts

@NgModule({
    imports: [SharedModule]
})