4

On a particular website, there is an Angularjs app that I don't control. It's loaded on the HTML when I open the page. Let's call it app 1 :

<body data-ng-app="app1">.....</body>

My chrome plugin inserts an Angular 2 app in the HTML of the websites I visit. Let's call it app 2. I normally insert it with this code :

$('body').append('<app-root id="app-root"></app-root>');
platformBrowserDynamic().bootstrapModule(AppModule);

But this doesn't work.

==> The problem is, the Angularjs "app 1" is located directly in the body. So how can I insert my Anglular 2 "app 2" in the HTML, side-by-side?

  • The documentation clearly states that the `ng-app` auto-bootstrap directive needs to be removed to work with the ng-upgrade module. The AngularJS app needs to be bootstrapped manually by the ng-upgrade module. See [Angular Developer Guide - Bootstrapping hybrid applications](https://angular.io/guide/upgrade#bootstrapping-hybrid-applications). – georgeawg Nov 26 '17 at 14:54
  • Possible duplicate of [Migrating Angular 1 to Angular 4](https://stackoverflow.com/questions/44312788/migrating-angular-1-to-angular-4/44312853#44312853). – georgeawg Nov 26 '17 at 14:56

1 Answers1

2

I am not entirely sure if this will work (never tried angular 2 as a chrome extension app)

$('html').append('<app-root id="app-root"></app-root>');
platformBrowserDynamic().bootstrapModule(AppModule);

or create a div element and use insertAdjacentHTML inside the body with afterbegin position https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

DrNio
  • 1,936
  • 1
  • 19
  • 25
  • It "works" in that it processes my angular code. But because I am outside of the , my modal doesn't show up on the screen –  Jan 28 '18 at 18:47
  • you can fix that with css i think. just try some `position: absolute` or `fixed` and high enough `z-index` – DrNio Jan 28 '18 at 23:17