PreloadAllModules cause ReferenceError: Cannot access 'myModule' before initialization

Question

[使用：Angular 8，Chrome79，Ionic 4，开发模式（ionic 服务）]

我的 Angular 路由器有问题，我启用了 PreloadAllModules 并且取决于哪个模块在我的路由定义中首先出现，它会导致 ReferenceError: Cannot access 'myModule' before initialization 到另一个。

import { NgModule } from "@angular/core";
import { PreloadAllModules, RouterModule, Routes } from "@angular/router";

const routes: Routes = [
  {
    path: "",
    pathMatch: "full",
    redirectTo: "home"
  },
  {
    loadChildren: () => import("./home/home.module").then((m) => m.HomePageModule),
    path: "home"
  },
  {
    loadChildren: () => import("./list/list.module").then((m) => m.ListPageModule),
    path: "list"
  },
  {
    loadChildren: () =>
      import("./myFirstModule/app/myFirstModule.module").then((m) => m.MyFirstModule),
    path: "myFirstModule"
  },
  {
    loadChildren: () =>
      import("./mySecondModule/app/mySecondModule.module").then((m) => m.mySecondModule),
    path: "mySecondModule"
  }
];

@NgModule({
  exports: [RouterModule],
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })]
})
export class AppRoutingModule {}

上面的代码将触发：ReferenceError: Cannot access 'mySecondModule' before initialization 当我点击菜单中的 link 时，但是如果我直接通过 URL 访问路由，则不会触发错误！

如果我像这样插入 myFirstModule 和 mySecondModule :

const routes: Routes = [
  {
    path: "",
    pathMatch: "full",
    redirectTo: "home"
  },
  {
    loadChildren: () => import("./home/home.module").then((m) => m.HomePageModule),
    path: "home"
  },
  {
    loadChildren: () => import("./list/list.module").then((m) => m.ListPageModule),
    path: "list"
  },
  {
    loadChildren: () =>
      import("./mySecondModule/app/mySecondModule.module").then((m) => m.mySecondModule),
    path: "mySecondModule"
  },
  {
    loadChildren: () =>
      import("./myFirstModule/app/myFirstModule.module").then((m) => m.MyFirstModule),
    path: "myFirstModule"
  }
];

错误将在导航到 myFirstModule 时触发：ReferenceError: Cannot access 'myFirstModule' before initialization 但如果我通过 URL 直接访问它会起作用....

如果我删除 PreloadAllModules，我可以第一次导航到任何模块，但是当我访问另一个模块时，我的库出现错误： ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'prototype' of undefined TypeError: Cannot read property 'prototype' of undefined at sax.js:222

myFirstModule

export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
  declarations: [
    MyFirstModuleComponent,
    ...
  ],
  entryComponents: [
    ...
  ],
  exports: [],
  imports: [
    CommonModule,
    IonicModule,
    MyMaterialModule,
    MyStore1Module,
    RouterModule.forChild([
      {
        component: MyFirstModuleComponent,
        path: ""
      }
    ]),
    TranslateModule.forChild({
      loader: {
        deps: [HttpClient],
        provide: TranslateLoader,
        useFactory: createTranslateLoader
      }
    })
  ],
  providers: [MyService]
})
export class MyFirstModule{}

我的第二模块

registerLocaleData(_default, "fr");

@NgModule({
  declarations: [
    MySecondModuleComponent,
    ...
  ],
  entryComponents: [
    ...
  ],
  imports: [
    CommonModule,
    MyMaterialModule,
    MatDialogModule,
    ClickOutsideModule,
    MyStore2Module,
    MyStore3Module,
    AngularSplitModule.forChild(),
    HighchartsChartModule,
    RouterModule.forChild([
      {
        component: MySecondModuleComponent,
        path: ""
      }
    ])
  ],
  providers: [
    {
      provide: LOCALE_ID,
      useValue: "fr-FR"
    }
  ]
})
export class MySecondModule{}

Answer 1

我找到了解决办法。

一位同事在没有 npm 的情况下导入了 sax，这导致 xml2js 和 jszip 在这个库上发生冲突。

我通过 npm 安装了 sax 并删除了手动导入，现在可以使用了。

PreloadAllModules cause ReferenceError: Cannot access 'myModule' before initialization

PreloadAllModules cause ReferenceError: Cannot access 'myModule' before initialization

angular

ionic-framework

angular-routing

angular-module