App Module is loading twice after upgrading to Angular 14

Question

Our AppModule is getting loaded twice when we start our Angular App. This leads to duplicate calling of API's that increases unnecessary load. So need help in understanding what's causing the app module to bootstrap twice.

app.moudle.ts

export class AppModule {
constructor() {
console.log('App module loaded.');
 }
}

Bootstrapping the AppModule in the main.ts

 platformBrowserDynamic().bootstrapModule(AppModule);

Want to understand if the lazy loading is causing the app module to load twice in the app routing.ts ?

loadChildren : () => import('./sharedComponent/sharedComponent.module').then(module => module.SharedModule)

imports:   [ RouterModule.forRoot(appRoutes, { useHash: true, relativeLinkResolution: 'legacy' })],

Note : We don't have references to AppModule in any other components other than in main.ts. Thanks in advance

Answer 1

Could you try changing the main.ts code with this then block where they destroy other instances, maybe it will solve your issue, also if it does not please try to replicate the same in the stackblitz and update the question with it!

import './polyfills';

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then((ref) => {
    // Ensure Angular destroys itself on hot reloads.
    if (window['ngRef']) {
      window['ngRef'].destroy();
    }
    window['ngRef'] = ref;

    // Otherwise, log the boot error
  })
  .catch((err) => console.error(err));

stackblitz