How do I use Component in 3 Modules

Question

My application contains 3 modules

• AppModule
• AdminModule
• XLModule

The Component AppHeader ( header of the website ) needs to be used in 3 modules aforementioned.

Right now, it is only being used in AppModule. When I needed to make "AppHeader" work in second module AdminModule I didn't really have time to commit to actually learn how to use one Component in different Modules, so what I have done is just copy pasted the "AppHeader" and renamed it to "AdminHeader" and then imported it to AdminModule to create so-called "workaround".

At that time I didn't really have the "XLModule".

Now I wanna make "AppHeader" used in all 3 modules and I really wanna get rid of that copypasted "AdminHeader".

So, right now in my app.module I have included the "AppHeader"

import { AppHeaderComponent} from './components';

const APP_COMPONENTS = [ AppHeaderComponent]

in my NgModule I have

@NgModule({
imports: [
BrowserModule,
CommonModule,
.... bunch of imports here nothing related to AppHeader and 2 other modules of the applications are also not imported

in my declarations :

...APP_COMPONENTS

in my exports :

APP_COMPONENTS

When ever I try to import "AppHeader" to any of 2 other modules, I do get an error that "AppHeader" is used by 2 modules.

Where do I go from here? What did I miss in AppModule that needs to be imported or exported? And, what should be imported in 2 other Modules as well to make this "AppHeader" work in all 3 of them without actually making duplicate components.

Answer 1

what i do in my projects for components like this is that i create a SharedModule(or whatever name you want for it) and add any component i want to use in multi places to this module and then you can import this module in any module you want to use that component .

this is SharedModule:

import {NgModule} from '@angular/core';
import {HeaderComponent} from "./header.component/header.component";
@NgModule({
imports: [
    CommonModule,
],
declarations: [
    HeaderComponent,

],
exports: [
    HeaderComponent,
],
providers: [

]
})
export class SharedModule {
}

and this will be the module i want to use component in :

import {NgModule} from '@angular/core';
import {SharedModule} from '../_shared.module/shared.module';

@NgModule({
imports: [
    SharedModule,

],
declarations: [

],
providers: [

]
})
export class ModuleIWantToUseComponentIn {
}