Angular combine multiple angular application into one.

[Darxx 84]

Hello everyone,

Need some help with figuring out how to move forward with Angular.

A bit of backstory
We have created platform with AngularJS where users can create separate applications (plugins) which uses services provided from main application,

can register their routes and modules. Basically applications (plugins) are installed just by adding .js files to index.html file and registering them to core module by providing routes and modules.

All our plugins depends on core application they use it without having access to source code. Basically they use production code.

Core application provides bunch of services which are shared across all plugins, for example authentication service with full life cycle of authentication token.

Having this idea we started looking how we can it be implemented in Angular?

How can we build application from separate parts and combine it at runtime?

Is it possible for example not using --prod flag to build 3 separate angular applications without using original core source code and combine it to one? and if it is possible, how can this be automated?

respectfully,

Darius

[Darxx 84]

This is how we did in AngularJS https://pastebin.com/TreYLXnv

[Darxx 84]

If you need more info on how it works with AngularJS please let me know

On Wednesday, April 4, 2018 at 5:58:55 PM UTC+3, Darxx 84 wrote:

[Sander Elias]

Hi Darius,

From version 6 on, the Angular CLI will offer support for this. you can create a single project, that will hold multiple apps and libraries. You can test this already with the RC of version 6, but there is little to no documentation yet.

If you need to get started today, I would say, take a look at NX from nrwl, as this is supporting this setup already.

However, both of those solutions will create you a monorepo for your project. 

Regards

Sander

[Darxx 84]

Hello Sander,

First of all thank You for Your response.

Just to clarify my problem. We have customers which use our platform and they cant or will not be allowed to expose their code to us.

They are using our API (AngularJS services, models, components) in order to integrate. Their builds do not depend on ours. In order to build their plugin they are using our core module which is build, production code (minificated). 

Going a bit deeper in plugin build. Plugin code depends on core module, but dependency is not injected at build time. It is injected on page load. example: https://pastebin.com/TreYLXnv

So we cannot have monorepo for all external plugins. We need to have ability to build plugin separately and be able to load it at page load time.

So going back to Angular 6 and CLI, how can it help us? Can you give me some kind of a sample of exporting apps and libraries which could be combined later at page load time?

If Angular 6 CLI is not a solution can we achieve custom builds using WebPack or others. If so, can we get a sample of customizing build?

respectfully,

Darius

[Sander Elias]

Hi Darius,

Hmm, that use-case is quite specific. Now I'm thinking more about angular elements. but not their first iteration, probably the one right after the first official release. In time that means at least six months, realistically probably at least a year.

I don't have a link handy, but I suspect you can use the method Ward and Jesus talked about on AngularConnect 2017. Watch that talk, and come back to me if you have doubts/questions. 

Regards

Sander