ng.profiler.timeChangeDetection() not working

Question

I am trying to debug and profile an angular app for performance and try to get the following command working

ng.profiler.timeChangeDetection()

While trying to run the above command in console I am getting following error

VM999:1 Uncaught TypeError: Cannot read properties of undefined (reading 'timeChangeDetection')
    at <anonymous>:1:13

I have also added below code in the main.ts

import {ApplicationRef} from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import {enableDebugTools} from '@angular/platform-browser';

platformBrowserDynamic().bootstrapModule(AppModule).then(moduleRef => {
  const applicationRef = moduleRef.injector.get(ApplicationRef);
  const componentRef = applicationRef.components[0];
  // allows to run `ng.profiler.timeChangeDetection();`
  enableDebugTools(componentRef);
}).catch(err => window['console'].error(err));

reference of above code :- https://dmitrymogilko.medium.com/profiling-angular-change-detection-c00605862b9f

But no luck. Can anyone point me in the right direction, so I can profile the angular app.

Answer 1

Goto the main.ts file (used to bootstrap your Angular application) and edit these lines of code...

platformBrowserDynamic().bootstrapModule(AppModule) 
   .catch(err => console.error(err));

…to look like this.

platformBrowserDynamic().bootstrapModule(AppModule) 
   .then(module => enableDebugTools(module.injector.get(ApplicationRef).components[0]))      .catch(err => console.error(err));

For further detail you can refer to below article https://itnext.io/heres-how-to-find-the-change-detection-bottle-necks-in-your-angular-application-333a71758477