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

@@ -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()}

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);
 

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>';