angular - PreloadAllModules 导致 ReferenceError：在初始化之前无法访问“myModule”

问题描述

[使用：Angular 8、Chrome79、Ionic 4、开发模式（离子服务）]

我的 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单击菜单中的链接时，如果我直接通过 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

我的第一个模块

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{}

标签： angularionic-frameworkangular-routingangular-module

angular - PreloadAllModules 导致 ReferenceError：在初始化之前无法访问“myModule”

问题描述

解决方案

推荐阅读