5

I am new to Angular and just started learning. I have a situation where I like to use the same component across multiple projects.

Let's say, I have a CustomerComponent and it does CRUD operations.

Now I want to use the CustomerComponent in project A and project B. The reason is that if I have to modify the CustomerComponent, I can modify only in one place instead of multiple projects.

Is it possible to create a component like that?

If it is possible, please guide me how I can accomplish this one.

Thanks in advance.

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
Alomoni
  • 103
  • 1
  • 9
  • Are the projects under same angular-cli config? I mean, do you serve multiple apps within single project? – Bunyamin Coskuner Mar 09 '18 at 21:23
  • I have the similar question like Bunyamin. I would like to keep the core module in a shared folder and import the module into the current project. It is kind of the way you import the core angular modules. Such as import { CommonModule } from '@angular/common'; – Alomoni Mar 10 '18 at 00:13
  • Yes you can do that, there are some ways. Tell me little bit about your projects. Are your apps under same folder or at totally different places? – Bunyamin Coskuner Mar 10 '18 at 08:31
  • Take a look at this: https://stackoverflow.com/questions/45575372/handling-multiple-applications-with-angular-cli – Bunyamin Coskuner Mar 10 '18 at 08:36
  • 1
    The apps would be in a different folder. Let's consider this way. You are building two different apps such as Order Management (OM) and Accounts Receivable(AR) apps. Both apps are independent of each other. You can not allow the same person to have an access to both apps. But you must allow the user to do the CRUD operations in both apps. So, I want to use the same customer component where it has the CRUD functionalities. If something has changed for the Customer component, you would change only in one place and reflects the changes in both apps. Thanks – Alomoni Mar 10 '18 at 12:23

2 Answers2

5

Yes. This is definitely possible. You should do that by creating a separate module that will have this component registered on it. Then you can export this component from this module and import the module into the app modules of the projects in which you want to use this component.

Say, for example, you have a core module, something like this:

@NgModule({
  declarations: [CustomerComponent],
  exports: [CustomerComponent],
})
export class CoreModule{}

In here we have declared a component named CustomerComponent and we have also exported it from this CoreModule

So now, if say, you have two different projects with AppModule as their root modules, in both these projects, you'll have to import this CoreModule. Something like this:

@NgModule({
  imports: [CoreModule],
})
export class AppModule{}

And once this is done, the CoreModule would be registered as a Module, exported features of which can then be used inside your AppModule.

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
2

Definitely, that it is actually encouraged to share Components via Modules:

See more here: https://angular.io/guide/sharing-ngmodules

Additionally, if you want to share services around since they are implemented as Singletons it's a bit different.

Edit (Dec 12, 18) Here is a link talking about singleton services: https://angular.io/guide/singleton-services

Use case matters however for clarity you can read above. Thanks!

Nico
  • 1,961
  • 17
  • 20
  • can you point out some reference for sharing singleton services also? i think could be useful for completness shake – netalex Dec 11 '18 at 00:32
  • pay also attention to this, and consider using custom libraries instead if you intend to share modules between multiple _apps_: https://github.com/angular/angular-cli/issues/11168 – netalex Dec 11 '18 at 00:34
  • 1
    @netalex Added. – Nico Dec 12 '18 at 13:31