How to have 2 of the SAME angular apps running on the same page?

Question

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
      <container-app-root>
        <app-root></app-root>
        <app-root></app-root>
      </container-app-root>
  </body>
</html>

I'm trying to run two of the same angular apps from within another containing angular app. The containing angular app boostraps but only one of the inner angular apps bootstraps. The other one is just treated as regular html tags. I get no errors.

This is not my setup but instead just a simple setup of what I would like to be able to do.

I'm not exactly sure the use case for this, but you might be better off creating one master app with 2 child apps inside — chrismclarke
– chrismclarke, Commented Aug 24, 2019 at 0:31
@chrismclarke wouldn't that be the same issue? As in, I would need the child apps to be the same app. — XXIV
– XXIV, Commented Aug 24, 2019 at 0:32
it's a similar issue you're right, but by having them both imported into a parent app you can have more flexibility over forRoot/forChild style methods and the bootstrapping process — chrismclarke
– chrismclarke, Commented Aug 24, 2019 at 0:39

chrismclarke · Accepted Answer · 2019-08-24 00:51:10Z

1

So the fact that they are the same makes no difference, the challenge is running two angular apps on the same page. This by default isn't supported, with whichever script loads first taking control of the page and loading the app (and blocking the other).

Depending on the use case, it would be recommended to turn the 'app' into a component or module that could have multiple copies embedded in a regular app.

If however, you require a solution with two apps on the same page, here is an "app of apps" example stackblitz:
https://stackblitz.com/github/mpierce5/angular-app-of-apps

Discussion of the techniques involved in combining multiple apps can be found at the following links:

https://medium.com/swlh/multiple-angular-apps-on-a-single-page-9f49bc863177

https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527

edited Aug 24, 2019 at 0:51

answered Aug 24, 2019 at 0:36

chrismclarke

2,11512 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

XXIV Over a year ago

These were the types of articles I had found when searching.. they are still talking about two separate angular apps running on the same page, which isn't an issue for me. I am needing to run two of the same angular apps (same root AppModule)

chrismclarke Over a year ago

As you won't be able to bootstrap both app modules at the same time that won't be possible, instead you need a third app which can be bootstrapped with two copies of the first app embedded inside

chrismclarke Over a year ago

But as suggested in my comment and above, a much simpler solution would be to try and isolate all the app functionality in a component/provider module which can then be loaded twice into the app if that's possible

XXIV Over a year ago

Would you mind throwing an example of for this? I think I understand the structure like: container same-app same-app container But i'm not sure how these would be bootstrapped

chrismclarke Over a year ago

which example? the 3 app case or the component/provider module case?

|

Adrian Brand · Accepted Answer · 2019-08-24 00:39:25Z

0

You can build the functionality into a component the provides all the services that should be unique instances. Then when you have that component on a page twice the data from one will be unique to each and they wont interfere with each other.

answered Aug 24, 2019 at 0:39

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Collectives™ on Stack Overflow

How to have 2 of the SAME angular apps running on the same page?

2 Answers 2

8 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Related