mgr/dashboard: Enable Angular's debug tools when using dev mode

Enabling this will allows us to run `ng.profiler.timeChangeDetection();`
in the browser.

Fixes: https://tracker.ceph.com/issues/47699
Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/main.ts b/src/pybind/mgr/dashboard/frontend/src/main.ts
index 741c9eb862fed45d5440272daae7a40101bfe50f..f399daf9b63780993ef27877decb13c3d7a677f5 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/main.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/main.ts
@@ -1,4 +1,5 @@
-import { enableProdMode } from '@angular/core';
+import { ApplicationRef, enableProdMode, isDevMode } from '@angular/core';
+import { enableDebugTools } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
@@ -10,4 +11,13 @@ if (environment.production) {
 
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
+  .then((moduleRef) => {
+    if (isDevMode()) {
+      // source: https://medium.com/@dmitrymogilko/profiling-angular-change-detection-c00605862b9f
+      const applicationRef = moduleRef.injector.get(ApplicationRef);
+      const componentRef = applicationRef.components[0];
+      // allows to run `ng.profiler.timeChangeDetection();`
+      enableDebugTools(componentRef);
+    }
+  })
   .catch((err) => console.log(err));