javascript - Run multiple Angular app in One page - Stack Overflow

admin管理员组

文章数量:1312970

Assuming there is already an existing angular running in the page. I would like to inject/add an isolated angular app into it (which runs in isolation with the existing angular app without interference).

For example, I would like to 1) insert a custom element say <app-root-two></app-root-two> in the page then 2) initialise/bootstrap that app (or vice versa).

How would I go about achieving this?

I know back in AngularJs it is possible because you can retrieve the DOM element and use angular.boostrap(<dom-element>) to initialise it but I don't think Angular has the same manual bootstrapping pattern. It is abstracted and it goes directly to DOM to find the root element, typically <app-root> in the page.

The current angular version I am working with is version 5.2 and Angular CLI 1.6.6. I have tried the .angular-cli.json file for generating multiple app however it targets two separate "index.html" files, that is two app in one project, not necessarily in one page.

Assuming there is already an existing angular running in the page. I would like to inject/add an isolated angular app into it (which runs in isolation with the existing angular app without interference).

For example, I would like to 1) insert a custom element say <app-root-two></app-root-two> in the page then 2) initialise/bootstrap that app (or vice versa).

How would I go about achieving this?

I know back in AngularJs it is possible because you can retrieve the DOM element and use angular.boostrap(<dom-element>) to initialise it but I don't think Angular has the same manual bootstrapping pattern. It is abstracted and it goes directly to DOM to find the root element, typically <app-root> in the page.

The current angular version I am working with is version 5.2 and Angular CLI 1.6.6. I have tried the .angular-cli.json file for generating multiple app however it targets two separate "index.html" files, that is two app in one project, not necessarily in one page.

• javascript
• angular

Share Improve this question Follow asked May 31, 2018 at 0:59 user2758141user2758141 13

• How important is organic search indexing? I would use iframes within a main container app, with seperate views and subroutes for each of your apps. – Hunter Frazier Commented May 31, 2018 at 5:06
• 1 Also take a look at this github./angular/angular/issues/16930 , it looks like team is considering this as a feature request – mehany Commented May 31, 2018 at 7:02
• 1 having checked existing documentations for angular and it suggests having >1 apps in same page is not a good idea so will leave this question without correct answer. Unless angular has similar mechanism like jQuery.noConflict then perhaps it would be possible – user2758141 Commented Jun 13, 2018 at 8:48
• 1 @HunterFrazier Hello. Do you have a sample of your iFrame solution to load multiple Angular apps:? Thank you – Pascal Commented Aug 14, 2018 at 18:23
• 1 Sorry Pascal I do not. I have implemented such features in the past, though, and it basically went like this. Use a proxy, (preferably at the server layer (Nginx) and not angular's built in route proxy aliasing or whatever it's called), to redirect a subdirectory location (e.g. /app2) to your secondary app (e.g. localhost:4201). This will allow you to serve the second app in a local, relatively addressed iframe (e.g. src="/app2") which will help with performance and cross-domain request issues. From there I suppose the possibilities are endless! I say, Iframes all day is the only way – Hunter Frazier Commented Aug 16, 2018 at 12:05

 |  Show 8 more ments

3 Answers 3

Sorted by: Reset to default 3

You need a different root element on your second AppModule. Then simply import your second app scripts (runtime, styles, etc) but delete window.webpackJsonp first.

For example

<app-one></app-one>
<app-two></app-two>

<script type="text/javascript" src="app-one/runtime.js"></script>
<script type="text/javascript" src="app-one/es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="app-one/polyfills.js"></script>
<script type="text/javascript" src="app-one/styles.js"></script>
<script type="text/javascript" src="app-one/vendor.js"></script>
<script type="text/javascript" src="app-one/main.js"></script>

<script>delete window.webpackJsonp</script>

<script type="text/javascript" src="app-two/runtime.js"></script>
<script type="text/javascript" src="app-two/es2015-polyfills.js" nomodule></script>
<script type="text/javascript" src="app-two/polyfills.js"></script>
<script type="text/javascript" src="app-two/styles.js"></script>
<script type="text/javascript" src="app-two/vendor.js"></script>
<script type="text/javascript" src="app-two/main.js"></script>

Though - to date - this works, the framework is clearly not designed for this. More plex apps with further chunking may have issues with the app's runtime that you're essentially changing when deleting webackJsonp object.

Polyfills that go to the global prototypes you may be able to skip reimporting.

Take a look at overall-structural-guidelines

You can simply load one app but orchestrate ( lazy load ) many different modules that would behave as Apps. Each sub major module would have all the modules, services, ponents etc that it needs and it would be isolated.

Upon looking into the source code, I had to do a bit of override. AngularJs does two things automatically: 1) bootstrap any "ng-app" 2) add a tag. To prevent any conflict. I mented both bits out. Instead I took the content of tag and placed it in my scss file and bootstrap my custom element manually

The other thing is Angularjs is loaded within the context of chrome extension content script therefore any window global defined directly in the content script will not bleed to the user page.

On top of that, I did use shadow dom to further isolate the application so that no css/js thing bleed in/out. As long as I don't modify any mon aspects of the page I should be fine, e.g. location. Any global events binding I need to add/remove based on the lifecycle. The end result would look something like this:

<custom-element>
   #shadow-dom
      <!-- stylesheet if any -->
      <!-- js script if any -->
      <bootstrapped-angular-element>

本文标签： javascriptRun multiple Angular app in One pageStack Overflow