How to load an angular2 app into another Angular2 app

Asked May 31 '16 at 17:35

Active May 31 '16 at 23:42

Viewed 163 times

I have an angular2 app that has a navbar, a sidebar and a content-area at: http://localhost:4200/

When navbar/sidebar items are clicked, I want the content-area to get it's content from other angular2 apps we will have set up, kind of like a front-end microservice approach.

So far, the only way I can load them is in an iframe:

<iframe src="http://localhost:3000/" frameborder="0" scrolling="no" seamless="seamless" style="position: absolute; width: 100%; height: 100%; border: none; overflow-y: hidden;"></iframe>

Is there another way to load other angular2 apps into my main app without iFrames? Is it possible for these ui apps to export just it's main component and then import that for use in the main app?

edited May 31 '16 at 23:42

asked May 31 '16 at 17:35

user1873196

1

You can bootstrap several Angular2 applications on your page but they can not be nested - only side by side. – Günter Zöchbauer Jun 01 '16 at 05:32
Can you please expand on this? What if I have 2 apps running at 2 different URLs, like the example above. Can I then have a main.ts that bootstraps the two so I can use both on the same page? – user1873196 Jun 03 '16 at 00:38
Sorry, I don't know how to load from 2 different URLs – Günter Zöchbauer Jun 03 '16 at 02:52

How to load an angular2 app into another Angular2 app

0 Answers0