升级到 Angular 14 后应用程序模块加载两次

Question

当我们启动 Angular 应用程序时，我们的 AppModule 会被加载两次。这会导致 API 的重复调用，从而增加不必要的负载。因此需要帮助来理解是什么导致应用程序模块引导两次。

app.moudle.ts

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

在 main.ts 中引导 AppModule

 platformBrowserDynamic().bootstrapModule(AppModule);

想了解延迟加载是否导致应用程序模块在应用程序routing.ts中加载两次？

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

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

注意：除了 main.ts 之外，我们在任何其他组件中都没有引用 AppModule。预先感谢

Answer 1

您能否尝试使用此

main.ts

块更改

then

代码，其中它们会破坏其他实例，也许它会解决您的问题，如果不能解决您的问题，也请尝试在 stackblitz 中复制相同内容并用它更新问题！

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));

堆栈闪电战