• 路由 - 延遲子路由的寫法

路由的幾種型態


  • 主路由

  • 子路由

  • 延遲子路由

  • 輔助路由

延遲子路由的寫法

1
2
3
4
5
6
export const routes: Routes = [
  {
    path: "home",
    loadChildren: "src/app/cms/home/home.module#HomeModule"
  },
];
  • PS:若寫了延遲子路由,出現TypeError: __webpack_require__.e is not a function, 只要把版本升級即可,至少 “@angular/cli”: “1.7.3”,
  • 當時在1.7.2一直錯誤,但後續我改成loadChildren: () => HomeModule 就OK

注意!下面的寫法在 prod 下無法正常執行

1
    { path: 'home', loadChildren: () => HomeModule }

請改成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    import HomeModule from 'home-module';

    export function loadHomeModule() {
        return HomeModule;
    }

    export const routes = {
        path: 'home',
        loadChildren: loadHomeModule,
    };