Share Component between 2 modules
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]
})
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.