尝试设置路径时无法读取未定义的属性“loadChildren”中的错误答案

【问题标题】：ERROR in Cannot read property 'loadChildren' of undefined when tried to set the path尝试设置路径时无法读取未定义的属性“loadChildren”中的错误
【发布时间】：2019-09-19 23:14:11
【问题描述】：

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

[ng] 错误无法读取未定义 [ng] i 的属性“loadChildren” ｢wdm｣：编译失败。

还有：

app-routing.module.ts:21 未捕获类型错误：无法读取属性未定义的“getLandingPage” 在 Module../src/app/app-routing.module.ts (app-routing.module.ts:21) 在 webpack_require (bootstrap:83) 在模块../src/app/app.module.ts (app.component.ts:21) 在 webpack_require (bootstrap:83) 在模块../src/main.ts (main.ts:1) 在 webpack_require (bootstrap:83) 在 Object.0 (main.ts:13) 在 webpack_require (bootstrap:83) 在 checkDeferredModules (bootstrap:45) 在 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);
    });
  }
}

【问题讨论】：

标签/登陆的定义在哪里？
@jcuypers 已更新。请看。
您需要在 getLandingpage 中的 url 添加 / 前缀
您也可以复制并粘贴“/pages/”的定义吗？你能确认目标是延迟加载吗？
@jcuypers 是的，这是延迟加载页面。

标签： angular typescript angular7 ionic4

【解决方案1】：

如果您使用 Route Guards，为什么不在完整比赛中使用一个守卫，然后从那里进行重定向？在需要的地方使用条件句

例子：

const routes: Routes = [
  {
    path: "",
    canActivate: [RouteGuard]
 },
  {
   path: "tabs",
   loadChildren: "./pages/tabs/tabs.module#TabsPageModule",
  },
  {
   path: 'landing',
  loadChildren: './pages/landing/landing.module#LandingPageModule'
 },
];

RouteGuard：

 canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    return new Promise(async resolve => {
        this.router.navigate([environment.hotelName]);
        resolve(true)
  }
}

【讨论】：

【解决方案2】：

检查路由器配置中的任何编程逻辑

当您在路由器配置中使用带有字符串键和字符串值的简单对象时，可能会出现此问题。

在我的情况下，它发生在在某个路由的数据对象中设置正则表达式时：

{
  path: 'path', 
  component: MyComponent,
  data: {
    regEx: /^[a-f\d]{24}$/i,
  },
},

编译器对此感到窒息，并简单地报告了非描述性错误：

无法读取未定义的属性“loadChildren”时出现错误

我在遇到此问题的人身上发现的其他示例是相关的。例如this one on GitHub，其中有人使用常量作为解析器的键：

const SOME_CONSTANT = 'someResolver',

{
  path: 'path',
  component: MyComponent,
  resolve: {
    [SOME_CONSTANT]: SomeResolver, // <-- you can't do this
  },
},

换句话说，当遇到此问题时，请检查您是否有某些键、值或路由器配置的其他部分以编程方式定义。

【讨论】：

【解决方案3】：

您应该在 AppRoutingModule 之外定义 getLandingPage()：

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

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

Stackblitz 示例 (https://stackblitz.com/edit/angular6-lazy-loading-hroo3l?file=src%2Fapp%2Fapp-routing.module.ts) 使用 const hotelName 而不是 environment，因为 stackblitz 没有定义环境变量。

也不确定它与 AOT 的搭配效果如何。

【讨论】：

【解决方案4】：

这类似于许多其他人使用 rouge 逗号所经历的情况。删除路由列表末尾的最后一个逗号，因为路由器认为有 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'
  }
];

（注意您的“着陆”路线条目后缺少逗号）

【讨论】：

【解决方案5】：

我今天收到同样的错误“ERROR in Cannot read property 'loadChildren' of undefined”。

我认为此错误可能以多种方式发生。但对我来说，这只是 CanActivate 类中缺少的“导出”。

我有：

@Injectable({providedIn: 'root'})
class MyActivator implements CanActivate

其实我应该有：

@Injectable({providedIn: 'root'})
export class MyActivator implements CanActivate

这个错误有点难找！所以我只想在这里提一下。

【讨论】：