Question

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

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

并且：

app-routing.module.ts：21未捕获的TypeError：无法读取属性未定义的“ getLandingPage” 在Module ../ src / app / app-routing.module.ts（app-routing.module.ts：21）位于 webpack_require （引导程序：83）在Module ../ src / app / app.module.ts（app.component.ts：21）位于 webpack_require （引导程序：83）在Module ../ src / main.ts（main.ts：1）位于 webpack_require （引导程序：83）在Object.0（main.ts：13）位于 webpack_require （引导程序：83）在checkDeferredModules（bootstrap：45）在Array.webpackJsonpCallback [按入时]（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

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

示例：

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

Answer 2

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

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而不是环境，因为stackblitz没有定义环境变量。

也不确定在AOT上播放效果如何。

Answer 3

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

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

（请注意在您进入“着陆”航线后缺少逗号）

Answer 4

我今天遇到了同样的错误“ 无法读取未定义的属性'loadChildren'中的错误”。

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

我有：

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

实际上我应该有：

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

此错误很难发现！所以我只想在这里提及它。

Answer 5

检查路由器配置中是否有任何编程逻辑

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

就我而言，它是在某个路由的数据对象内设置正则表达式时发生的：

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

编译器对此感到cho恼，并仅报告了非描述性错误：

无法读取未定义的属性'loadChildren'中的错误

我发现与遇到此问题的人有关的其他示例也与此相关。例如this one on GitHub，其中有人将常量用作解析程序的键：

const SOME_CONSTANT = 'someResolver',

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

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

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

5 个答案:

检查路由器配置中是否有任何编程逻辑