8

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.

Improve this question
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. Commented May 31, 2018 at 5:06
  • 1
    Also take a look at this github.com/angular/angular/issues/16930 , it looks like team is considering this as a feature request 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 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 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 Commented Aug 16, 2018 at 12:05

3 Answers 3

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 complex 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.

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

2 Comments

Same can be achieved through the suggestion mentioned at github.com/angular/angular-cli/issues/…
Any latest update on this thread? Is Angular providing any way officially to support this?
1

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, components etc that it needs and it would be isolated.

Improve this answer

1 Comment

Thanks @mehany. This solution indeed works however only when you have total control over the two apps. The solution I am seeking is say when you don't have control over the existing app which is already in a page.
0

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 commented 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 common 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>
Improve this answer

Comments