[vite] Internal server error: Page / did not render in 30 seconds. (Angular 18)

[apappas1129]

project:

  "dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/cdk": "^18.1.4",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/platform-server": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@angular/ssr": "^18.0.3",
    "@hakimio/ngx-google-analytics": "^15.0.0",
    "@microsoft/applicationinsights-angularplugin-js": "^15.3.3",
    "@microsoft/applicationinsights-web": "^3.3.3",
    "@ng-select/ng-select": "^13.7.0",
    "dompurify": "^3.1.6",
    "enigma.js": "2.11.0",
    "express": "^4.18.2",
    "ngx-cookie-service": "^18.0.0",
    "rxjs": "~7.8.0",
    "swiper": "^11.1.9",
    "tslib": "^2.3.0",
    "xng-breadcrumb": "^12.0.0",
    "zone.js": "~0.14.3"
  },

error:

[vite] Internal server error: Page / did not render in 30 seconds.
      at Timeout.<anonymous> (@angular/build/src/utils/server-rendering/render-page.js:90:90)
      at Timeout.timer (zone.js/fesm2015/zone-node.js:2291:37)
      at _ZoneDelegate.invokeTask (zone.js/fesm2015/zone-node.js:402:33)
      at _ZoneImpl.runTask (zone.js/fesm2015/zone-node.js:159:47)
      at invokeTask (zone.js/fesm2015/zone-node.js:483:34)
      at Timeout.ZoneTask.invoke (zone.js/fesm2015/zone-node.js:472:48)
      at Timeout.data.args.<computed> (zone.js/fesm2015/zone-node.js:2260:32)
      at listOnTimeout (node:internal/timers:569:17)
      at process.processTimers (node:internal/timers:512:7)

As documented, I implemented the following:

// AppComponent
 constructor(

    private router: Router,
  ) {
    const angularPlugin = new AngularPlugin();
    const appInsights = new ApplicationInsights({
      config: {
        connectionString: environment.appInsightsConnectionString,
        extensions: [angularPlugin],
        extensionConfig: {
          [angularPlugin.identifier]: { router: this.router },
        },
      },
    });
    appInsights.loadAppInsights();
    ...

export const provideApplicationInsights = () => {
  return [
    // ApplicationInsightsService,
    {
      provide: ErrorHandler,
      useClass: ApplicationinsightsAngularpluginErrorService,
    },
  ];
};

app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(),
    provideHttpClient(withFetch()),
    provideAnimations(),
    provideGoogleAnalytics(environment.googleTagId),
    provideApplicationInsights(),
  ],
};

I have also tried to follow this approach but it doesn't seem to load/initialize/instantiate the service despite the written provider function. I even tried to eagerly load the service on AppComponent with inject and with constructor DI and I got the same error above. something is wrong maybe around execution of new ApplicationInsight or the .loadAppInsights() method itself.