3

I have a use case when I need to run 2+ Angular applications(6.1.10) on the same page, without routing. I have the following directory structure:

root
|- index.html
|- output
|  |
|   `-a
|  |   |-runtime.js
|  |   |-polyfills.js
|  |   |-main.js
|  |   `-styles.css
|   `-b
|      |-runtime.js
|      |-polyfills.js
|      |-main.js
|      `-styles.css

The applications above are built using Angular CLI (6.1.2). In the index.html I reference those files from output. To bootstrap the applications in the main.ts for a I have:

export function bootstrap(): Promise<any> {
  enableProdMode();
  return platformBrowserDynamic()
    .bootstrapModule(AppModuleA)
    .catch(err => console.error(err));
}

document.addEventListener('bootstrapAppA', () => bootstrap());

for b:

export function bootstrap(): Promise<any> {
  enableProdMode();
  return platformBrowserDynamic()
    .bootstrapModule(AppModuleB)
    .catch(err => console.error(err));
}

document.addEventListener('bootstrapAppB', () => bootstrap());

in the index.html:

<app-a></app-a>

<app-b></app-b>

<script>
  document.addEventListener("DOMContentLoaded", function (event) {
    function bootstrapModule(name) {
      const event = document.createEvent("CustomEvent");
      event.initEvent(name, true, true);
      document.dispatchEvent(event);
    }
    bootstrapModule('bootstrapAppA');
    bootstrapModule('bootstrapAppB');
  });
</script>

What happens is I see on the page is the only first defined application a the second one (b) doesn't bootstrap, that is, there is no bootstrap call from main.ts for b.

How it could be resolved?

Dmitry Fisenko
  • 148
  • 3
  • 17
  • 1
    Angular 2+ (including 6) was not designed to have several instances on the same page, there are some hacks around, but they are just that -- hacks, subject to be rendered useless on next Angular release (and who did full testing of apps running with these hacks? I guess nobody; good as PoC, not good for production). Thus, they are not recommended. One (less hacky) way to do something similar would be packing Angular functionality into web element (https://angular.io/guide/elements). – alx Jun 24 '19 at 19:47
  • 1
    As @alx mentioned, angular is not designed for this but out of curiosity, may I ask why you even need this? – sinanspd Jun 24 '19 at 19:55
  • Since an Angular app is like a module with a component being bootstrapped I would try to work with two apps like if it was the one but with two modules. Thus you could have two "apps" in one. Any service you need to be scoped to an App you just define at top-level module `providers` section. (meaning it should be one App but treated like two different via modules) – Sergey Jun 24 '19 at 20:01
  • @sinanspd, totally agree that it is weird, but unfortunately, this is a requirement. Each Angular application is a separate DNN module placed on a page and user could place many DNN modules, i.e, Angular applications on the page. – Dmitry Fisenko Jun 24 '19 at 20:03
  • Please explain what **original** problem you were trying to solve. Your current solution of trying to start **two** applications is *clearly* a poor solution to that problem. Rather then waste everyone's time getting help with your solution. Let us know what the original problem is and we'll try to fix that problem *properly*. – Reactgular Jun 24 '19 at 20:23
  • @Dmitry I figured that much. Angular itself is modular. So I guess I am curious to understand why you wouldn't define each as a module inside your app that wraps all these. This is a very common practice especially when people want to utilize lazy loading. Since the "App" itself is a module that wraps numerous components, modules & services, I am failing to see the advantage of multiple apps. The only time I would do that is when I want to deploy on different subdomains, in which case running them together becomes irrelevant – sinanspd Jun 24 '19 at 20:30
  • @Sergey, it could be an option, it won't work in my case, see the comment above. – Dmitry Fisenko Jun 24 '19 at 20:36
  • @Reactgular, each Angular application is intended to be a UI part of the DNN(https://www.dnnsoftware.com/) module placed on a page and the user could place many DNN modules on the same page. So, having this requirement I have multiple applications running on one page. – Dmitry Fisenko Jun 24 '19 at 20:42
  • @DmitryFisenko you don't need multiple apps to make a CMS out of Angular. It can be done with lazy loading and dynamic components. – Sergey Jun 25 '19 at 04:36
  • 1
    If you need to give people multiple Angular modules to be placed on web pages then you use elements. https://angular.io/guide/elements – Reactgular Jun 25 '19 at 11:09
  • You can check this link and get some inspiration: https://stackoverflow.com/questions/39686305/changing-shared-data-between-root-modules – Nguyen Tran Apr 27 '20 at 05:09

0 Answers0