Dynamically inject compiled applications in angular 2

Question

I have a requirement to develop multiple Angular 2 applications independently by various teams. Each team will have independent releases scheduled. Towards the end, all these applications will need to be injected into one main application at runtime. They will need to work as a Single Page Application. We tried Lazy loading modules of Angular 2. One of the roadblocks we see is that we cannot compile the main application using web pack without having the lazy load modules in the project solution.

Here is the structure of my present solution:

Image1

This is how I defined the routes

image2

We have defined two routes that lazy loads two modules(LazyModule and MoreLazyModule). This solution works fine. When we remove those modules from the solution try to build it using web pack, the compiler throws an error. Is there any way we can decouple the modules to develop them as independent projects and inject those modules in production?

Answer 1

Lazy Loading is the solution for your problem (at least as far as I know).

If I understand correctly, what you are trying to build is an app which has an external container (app.module and app.component) which need to orchestrate several other independent apps. The whole thing needs to behave as a Single Page Application.

If this is the case, then what I suggest you to do is the following:

• have a team (or an individual responsible for all the code of the Container app (app.module, app.component, any other common code you may want to share among the various apps) - the Container app references all the subApps (and gets updates as soon as a new subApp is added)
• have different teams responsible for the different subApps - these teams work on the code of their competence, submit to the code repository when ready, but use the entire project (ie also the subApps of the other teams) any time they build

I do not see any issue in organizing the work like this, as soon as every team checks in the code to the central code repository only when all tests have passed (and the tests cover the application functionalities thoroughly). The coordination effort required to the team responsible for the Container app is really minimal.