angular - 尝试设置路径时无法读取未定义的属性 'loadChildren' 中的错误

Question

我需要有条件地加载路由路径。我在下面尝试过。但它给出了这个错误。你能告诉我如何完成这种任务吗？

[ng] ERROR in Cannot read property 'loadChildren' of undefined [ng] i ｢wdm｣: Failed to compile.

和:

app-routing.module.ts:21 Uncaught TypeError: Cannot read property 'getLandingPage' of undefined at Module../src/app/app-routing.module.ts (app-routing.module.ts:21) at webpack_require (bootstrap:83) at Module../src/app/app.module.ts (app.component.ts:21) at webpack_require (bootstrap:83) at Module../src/main.ts (main.ts:1) at webpack_require (bootstrap:83) at Object.0 (main.ts:13) at webpack_require (bootstrap:83) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32)

app.routing.module.ts

const routes: Routes = [
  {
    path: "",
    redirectTo: this.getLandingPage(), // here is the issue
    pathMatch: "full",
  },
  {
   path: "tabs",
   loadChildren: "./pages/tabs/tabs.module#TabsPageModule",
  },
  {
   path: 'landing',
  loadChildren: './pages/landing/landing.module#LandingPageModule'
 },
];

export class AppRoutingModule {

  getLandingPage(): string {
    let url = "";
    switch (environment.hotelName) {
      case "h1":
        url = "tabs";
        break;
      case "h2":
        url = "landing";
        break;
      default:
    }
    return url;
  }


}

我有 auth.gurad.ts 如下所示。我不认为我可以在哪里使用它。

export class AuthGuard implements CanActivate {
  constructor(private router: Router,
    private user: UserService,
    private localStorageService: LocalStorageService) { }
  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return new Promise(async resolve => {
      const userInfo: UserInfo = await this.localStorageService.get(LocalStorage.USER_INFO);
      if (userInfo && (moment() < moment(userInfo.expireDate))) {
        this.user.guest = false;
        return resolve(true);
      }
      this.user.guest = true;
      this.router.navigate(["/sign-in"]);
      return resolve(false);
    });
  }
}

Answer 1

这类似于许多其他人对胭脂逗号的体验。删除路由列表末尾的最后一个逗号，因为路由器认为有 4 个项目，最后一个是 void 0/undefined 项目，因此缺少loadChildren.

const routes: Routes = [
  {
    path: "",
    redirectTo: getLandingPage(),
    pathMatch: "full",
  },
  {
    path: "tabs",
    loadChildren: "./pages/tabs/tabs.module#TabsPageModule",
  },
  {
    path: 'landing',
    loadChildren: './pages/landing/landing.module#LandingPageModule'
  }
];

(注意“着陆”路线条目后缺少的逗号)