Runtime: expose angular injector (#24262)

packages/grafana-runtime/src/services/index.ts

@@ -4,3 +4,4 @@ export * from './dataSourceSrv';
 export * from './LocationSrv';
 export * from './LocationSrv';
 export * from './EchoSrv';
 export * from './EchoSrv';
 export * from './templateSrv';
 export * from './templateSrv';
+export * from './legacyAngularInjector';

packages/grafana-runtime/src/services/legacyAngularInjector.ts

+import { auto } from 'angular';
+
+let singleton: auto.IInjectorService;
+
+/**
+ * Used during startup by Grafana to temporarily expose the angular injector to
+ * pure javascript plugins using {@link getLegacyAngularInjector}.
+ *
+ * @internal
+ */
+export const setLegacyAngularInjector = (instance: auto.IInjectorService) => {
+  singleton = instance;
+};
+
+/**
+ * WARNING: this function provides a temporary way for plugins to access anything in the
+ * angular injector.  While the migration from angular to react continues, there are a few
+ * options that do not yet have good alternatives.  Note that use of this function will
+ * be removed in the future.
+ *
+ * @beta
+ */
+export const getLegacyAngularInjector = (): auto.IInjectorService => singleton;

public/app/routes/GrafanaCtrl.ts

@@ -6,7 +6,7 @@ import Drop from 'tether-drop';
 
 
 // Utils and servies
 // Utils and servies
 import { colors } from '@grafana/ui';
 import { colors } from '@grafana/ui';
-import { getTemplateSrv, setBackendSrv, setDataSourceSrv } from '@grafana/runtime';
+import { getTemplateSrv, setBackendSrv, setDataSourceSrv, setLegacyAngularInjector } from '@grafana/runtime';
 import config from 'app/core/config';
 import config from 'app/core/config';
 import coreModule from 'app/core/core_module';
 import coreModule from 'app/core/core_module';
 import { profiler } from 'app/core/profiler';
 import { profiler } from 'app/core/profiler';
@@ -31,6 +31,7 @@ import { DashboardSrv, setDashboardSrv } from 'app/features/dashboard/services/D
 import { ILocationService, ITimeoutService, IRootScopeService, IAngularEvent } from 'angular';
 import { ILocationService, ITimeoutService, IRootScopeService, IAngularEvent } from 'angular';
 import { AppEvent, AppEvents, locationUtil } from '@grafana/data';
 import { AppEvent, AppEvents, locationUtil } from '@grafana/data';
 import { backendSrv } from 'app/core/services/backend_srv';
 import { backendSrv } from 'app/core/services/backend_srv';
+import { auto } from 'angular';
 
 
 export type GrafanaRootScope = IRootScopeService & AppEventEmitter & AppEventConsumer & { colors: string[] };
 export type GrafanaRootScope = IRootScopeService & AppEventEmitter & AppEventConsumer & { colors: string[] };
 
 
@@ -47,7 +48,8 @@ export class GrafanaCtrl {
     datasourceSrv: DatasourceSrv,
     datasourceSrv: DatasourceSrv,
     keybindingSrv: KeybindingSrv,
     keybindingSrv: KeybindingSrv,
     dashboardSrv: DashboardSrv,
     dashboardSrv: DashboardSrv,
-    angularLoader: AngularLoader
+    angularLoader: AngularLoader,
+    $injector: auto.IInjectorService
   ) {
   ) {
     // make angular loader service available to react components
     // make angular loader service available to react components
     setAngularLoader(angularLoader);
     setAngularLoader(angularLoader);
@@ -57,6 +59,7 @@ export class GrafanaCtrl {
     setLinkSrv(linkSrv);
     setLinkSrv(linkSrv);
     setKeybindingSrv(keybindingSrv);
     setKeybindingSrv(keybindingSrv);
     setDashboardSrv(dashboardSrv);
     setDashboardSrv(dashboardSrv);
+    setLegacyAngularInjector($injector);
 
 
     locationUtil.initialize({
     locationUtil.initialize({
       getConfig: () => config,
       getConfig: () => config,