16

I'm in doubt in how to share components between modules in Angular 2. The point is: I have two modules in the app, the 'Customers Module' and the 'Suppliers Module'.

Both these modules, in their components, make use of the AddressComponent and the EmailComponent. They also both make use of the interfaces Address and Email.

Now, currently I have lots of duplication, because I've copied and pasted these components and interfaces on both modules. This is obviously just plain wrong.

I need a way to import those components to be used on both modules. But I have no idea on how to do it.

Should I create another module for this shared stuff and import it in both? What is the right way to share components between modules in Angular 2?

user1620696
  • 10,825
  • 13
  • 60
  • 81

2 Answers2

20

Create a shared NgModule that will have all common Component/Service/Pipe. By doing so you will avoid code duplication. It will make code modularize, plug-able & testable.

In order to use AddressComponent & EmailComponent in other modules, you need to export them from the shared module:

Code

@NgModule({
   imports: [CommonModule],
   declarations: [AddressComponent, EmailComponent],
   providers: [MySharedService],
   exports: [AddressComponent, EmailComponent],
})
export class SharedModule { }

While Consuming SharedModule, all you have to do is import SharedModule

@NgModule({
   imports: [CommonModule, SharedModule, ... ],
   providers: [..]
})
export class CustomersModule { }
Vishnudev Krishnadas
  • 10,679
  • 2
  • 23
  • 55
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • 1
    I don't think this works, can't declare components twice: http://stackoverflow.com/a/39927548/777285 – Arnaud P Feb 14 '17 at 13:49
  • @ArnaudP thanks for heads up, I had removed redundant declaration, Thanks ;) – Pankaj Parkar Feb 14 '17 at 14:06
  • Actually it's the other way around: SharedModule should be the only one declaring the component(s). And consumers only need to import SharedModule. – Arnaud P Feb 14 '17 at 14:17
  • @ArnaudP in above mentioned case I'll import specific component from `SharedModule` in whatever consumer module I needed.. – Pankaj Parkar Feb 14 '17 at 14:21
  • I'll edit your answer to show what I mean (as per the link as provided, and my own experiments), rollback if you disagree. – Arnaud P Feb 14 '17 at 14:23
  • @ArnaudP sure, thing. Thanks for your thoughts :) – Pankaj Parkar Feb 14 '17 at 14:24
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/135690/discussion-between-arnaud-p-and-pankaj-parkar). – Arnaud P Feb 14 '17 at 14:27
  • It works for me also but don't know why this answer is still not accepted. – Swanand Taware Sep 10 '18 at 05:37
  • Importing "SharedModule" in multiple other modules, will it actually duplicate code when the "ng build" is done, How does the internal core behaves when importing a module in multiple modules? Any Idea? – Paul Nov 11 '19 at 04:14
1

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:

Either we repeat the same code everywhere in all the views where it’ll be used. 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

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:

SharedModule

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

export class SharedMoule {} app.module.ts

import { SharedModule } from './shared/shared.module;

@NgModule({ imports: [ SharedModule], ... })

gnganapath
  • 917
  • 12
  • 16