I'm trying to include a Component
in 2 modules (parent and child) but getting various errors in the process
app.module.ts
@NgModule({ declarations: [SharedComponent], exports: [SharedComponent]... })
child.module.ts
@NgModule({ imports: [SharedComponent], //Unexpected directive imported by module })
app.html
<div class="container"> <shared-selector></shared-selector> <child-selector></child-selector> </div>
child.html
<div> content <shared-selector></shared-selector> </div>
I'm loading the ChildModule in Async matter
loadChildren: 'app/child.module#ChildModule',
When not importing
or declaring
in the ChildModule
I'm getting the error:
template parse error: shared-selector is not a known element
****** UPDATE *******
when Creating FeatureModule
, in order to work the SharedModule
should export the Components...updateed code...
SharedModule
@NgModule({ imports: [ CommonModule ], declarations: [ SharedComponent ], exports: [ SharedComponent ] }) export class SharedModule {}
app.module.ts
@NgModule({ imports: [ChildModule, SharedModule],... })
child.module.ts
@NgModule({ imports: [SharedModule], //Unexpected directive imported by module })
You can use same directives/components in multiple modules without errors.
Component can be declared in a single module only. In order to use a component from another module, you need to do two simple tasks: Export the component in the other module. Import the other module, into the current module.
You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your application. Notice the following: It imports the CommonModule because the module's component needs common directives.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With