ОШИБКА в Не удается прочитать свойство 'loadChildren' из неопределенного при попытке установить путь

Question

Мне нужно условно загрузить маршрут маршрута. Я попробовал ниже. Но это дает эту ошибку. Можете ли вы сказать мне, как выполнить эту задачу?

[ng] ОШИБКА в Невозможно прочитать свойство 'loadChildren' неопределенного [ng] i ｢Wdm｣: не удалось скомпилировать.

И

app-routing.module.ts: 21 Uncaught TypeError: Невозможно прочитать свойство 'getLandingPage' из неопределенного в модуле ../ src / app / app-routing.module.ts (app-routing.module.ts: 21) в webpack_require (начальная загрузка: 83) в модуле ../ src / app / app.module.ts (app.component.ts: 21) в webpack_require (начальная загрузка: 83) в модуле ../ src / main.ts (main.ts: 1) в webpack_require (начальная загрузка: 83) на объекте 0 (main.ts: 13) в webpack_require (начальная загрузка: 83) в checkDeferredModules (начальная загрузка: 45) в Array.webpackJsonpCallback [как push] (начальная загрузка: 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

Это похоже на то, что многие другие люди испытывали с помощью запятых.Удалите последнюю запятую в конце списка маршрутов, поскольку маршрутизатор считает, что существует 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'
  }
];

(обратите внимание на пропущенную запятую после входа в маршрут посадки)

Answer 3

Вы должны определить 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.