From afdd9b245549c36d4da3324c066a6cb975968d21 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Fri, 29 Oct 2021 11:31:41 +0200
Subject: [PATCH] Angular: only bootstrap the root application element (#40822)

* Angular: Do not bootstrap Angular against entire document

* Do not retrieve injector by using angular instance directly.
---
 public/app/AppWrapper.tsx                            | 5 ++++-
 public/app/angular/AngularApp.ts                     | 2 +-
 public/app/plugins/panel/graph/jquery.flot.events.ts | 6 +++---
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/public/app/AppWrapper.tsx b/public/app/AppWrapper.tsx
index 2e3f2bbc705..9502fe3e60c 100644
--- a/public/app/AppWrapper.tsx
+++ b/public/app/AppWrapper.tsx
@@ -89,7 +89,7 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
     navigationLogger('AppWrapper', false, 'rendering');
 
     // @ts-ignore
-    const appSeed = `<grafana-app ng-cloak></app-notifications-list><div id="ngRoot"></div></grafana-app>`;
+    const appSeed = `<grafana-app ng-cloak></app-notifications-list></grafana-app>`;
 
     return (
       <Provider store={store}>
@@ -105,12 +105,15 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
                       {pageBanners.map((Banner, index) => (
                         <Banner key={index.toString()} />
                       ))}
+
                       <div
+                        id="ngRoot"
                         ref={this.container}
                         dangerouslySetInnerHTML={{
                           __html: appSeed,
                         }}
                       />
+
                       <AppNotificationList />
                       <SearchWrapper />
                       {this.state.ngInjector && this.container && this.renderRoutes()}
diff --git a/public/app/angular/AngularApp.ts b/public/app/angular/AngularApp.ts
index dabcafbeea2..7eadf7e83ef 100644
--- a/public/app/angular/AngularApp.ts
+++ b/public/app/angular/AngularApp.ts
@@ -104,7 +104,7 @@ export class AngularApp {
   }
 
   bootstrap() {
-    const injector = angular.bootstrap(document, this.ngModuleDependencies);
+    const injector = angular.bootstrap(document.getElementById('ngRoot')!, this.ngModuleDependencies);
 
     monkeyPatchInjectorWithPreAssignedBindings(injector);
 
diff --git a/public/app/plugins/panel/graph/jquery.flot.events.ts b/public/app/plugins/panel/graph/jquery.flot.events.ts
index 2818e3b2461..af0b37248c1 100644
--- a/public/app/plugins/panel/graph/jquery.flot.events.ts
+++ b/public/app/plugins/panel/graph/jquery.flot.events.ts
@@ -1,13 +1,13 @@
-import angular from 'angular';
 import $ from 'jquery';
 import { partition, each } from 'lodash';
 //@ts-ignore
 import Drop from 'tether-drop';
 import { CreatePlotOverlay } from '@grafana/data';
+import { getLegacyAngularInjector } from '@grafana/runtime';
 
 /** @ngInject */
 const createAnnotationToolip: CreatePlotOverlay = (element, event, plot) => {
-  const injector = angular.element(document).injector();
+  const injector = getLegacyAngularInjector();
   const content = document.createElement('div');
   content.innerHTML = '<annotation-tooltip event="event" on-edit="onEdit()"></annotation-tooltip>';
 
@@ -68,7 +68,7 @@ const createEditPopover: CreatePlotOverlay = (element, event, plot) => {
 
   // wait for element to be attached and positioned
   setTimeout(() => {
-    const injector = angular.element(document).injector();
+    const injector = getLegacyAngularInjector();
     const content = document.createElement('div');
     content.innerHTML = '<event-editor panel-ctrl="panelCtrl" event="event" close="close()"></event-editor>';