Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Share Component between 2 modules

Tags:

angular

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 })   
like image 432
royB Avatar asked Sep 14 '16 08:09

royB


People also ask

Can we use same component in different modules?

You can use same directives/components in multiple modules without errors.

How do I use a component in another module?

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.

Can we use one module component to other module components?

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.


2 Answers

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] }) 
like image 162
royB Avatar answered Oct 02 '22 10:10

royB


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.

like image 23
Günter Zöchbauer Avatar answered Oct 02 '22 08:10

Günter Zöchbauer