Can I reuse components across apps?

Question

I am new to Angular2 and I am interested in finding out if there is a possibility of reusing entire sets of presentation components from within one application in another application?

For example I have an Angular 2 application called MyApp and in this I have some common components that I created, these are located in the app/components/common folder and each contain a TypeScript, Sass and HTML file.

I use Gulp to compile the TypeScript to JS and Sass to CSS.

I now release that these common components can be common across my other Angular 2 apps and as such I want to use them in a separate Angular 2 app called MyOtherApp.

I want to be able to pull all of the common components out of MyApp and be able to use them in MyOtherApp.

Is this possible? If so what is the best approach to this type of common sharing of components?

As I said I am using Gulp for building/running, and also System.js for config setup of the Angular apps.

I can share some code of what I have tried if required but I am unsure as to what is helpful to share so please request what might be useful and I will share.

Tarn

Answer 1

I think the most general way is to build a separate library that publishes NgModule - just like Angular itself, Angular Material 2 library, and others do. However it requires more effort to setup build script for library and makes it more difficult to debug.

Another option is to have a single TypeScript project for all applications with different entry point files with Angular bootstrap function for each project

Hallagan

thanks, can you provide a link or additional information as to why a library may be more difficult to debug? If the Library is its own self contained Angular project can it be debugged as such? Do you mean that debugging the library within the application it is imported into becomes difficult? – Tarn

Yeah, you can have self-contained app in library like here github.com/angular/material2/tree/master/src/demo-app However it will be harder to debug problems in your apps using the library - I would prefer to simulate the problems in app inside the library and debug them there – Hallagan

Thanks @Rem, would it be easier to serve up an internal Angular app inside the main angular app? What I want to do is have somewhere that I can run say guld serve components and this will load an application that showcases what common components are available. – Tarn

Yeah, I use webpack and there I need to change just entry point file that includes ng bootstrap, I think it shouldn't be hard with systemjs either (just look at material2 - they did it with gulp) – Hallagan

Answer 2

I organise my components like this:

/routes
  /route1/
    route1component.ts
    /route1child1
    /route1child2
  /route2/
    route2component.ts
    /route2child1
    /route2child2

/apponents (project-level-reuse, must be used in at least 2 places with the app to be promoted to an apponent)
  /project-reusable-component

/components (cross-project-level-reuse, used across multiple projects)
  /cross-project-reusable-component

Let's assume use of Git. Now within "components" I might typically share these across projects using Git submodules such that the reusable "components" would live in their own repo and could be pulled into any project as a submodule.

Udometer