How to share component to multiple modules in Angular2

Hey Guys,

    In every application some times there were some views which are repeated in the whole application, and for that we have two option:

1. Either we repeat the same code everywhere in all the views where it’ll be used.

2. Or we can create a common component and share it to every other view

If the functionality of the repeated view is same everywhere then repeating the code is not a best practice, In my opinion creating a common component and applying it to all different view/module is a great idea, it reduces the code redundancy and make our application neat and clean, also if something gets changed then you have to change it only in one component.

But how can we achieve this in Angular 2 application?

Since in Angular 2 we follow modular design pattern, which means we keep different views in different modules, but the question is how can we share a single component to different modules?

We cannot share a component to different modules by just importing that component inside all the modules, because Angular 2 doesn’t allow us to import single component to different modules, if you try to do this then Angular will throw an error:

    Type X(component) is part of the declarations of 2 modules

So, for solving this problem we create a Shared Module instead of sharing a component, now we share this module in all other modules for this we use import statement and import the shared module in all other modules after this the component will gets automatically shared to all the modules.

Below is the example of how to do it:

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

     

app.module.ts

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

 

As you can see above we create a SharedModule and then import it in the AppModule, now the SharedComponent is shared and available in all the modules via AppModule, If you want to use the SharedModule  in some specific module then don’t import it in the AppModule instead import it in those modules.

Note: If I don’t provide the SharedComponent inside the exports array of the SharedModule then that component will not be available outside that module, so don’t forget to export the component. Similarly you can share the Directives, Pipes and Modules, just provide them inside the exports array of shared module.

THANKS