如何使用Webpack中的AsyncRoute異步加載組件？

Question

我迷失了我的理解，如何將異步模塊加載到最新的angular-webpack-starter（RC4 with @ angular/router 3.0.0-beta.2）中運行。

有一個例子，但它會有助於得到更多的解釋，做什麼和如何一起玩。

我所做的： - 我出口我懶組件路線：

export const referenzRoutes: RouterConfig = [ 
    { path: '', component: Test3 }, 
    { path: 'testApp', component: TestApp }, 
] 

然後我進口，我父組件途徑中使用的子路由：

import {referenzRoutes} from "./+Referenz/referenz.routes"; 
export const routes: RouterConfig = [ 
    {...}, 
    {path: 'referenz', component: 'Referenz', canActivate: [ WebpackAsyncRoute ], 
    children: referenzRoutes}, 
] 

，我定義的異步線路像這樣每個組件：

export const asyncRoutes: AsyncRoutes = { 
    'Referenz': require('es6-promise-loader!./+Referenz/referenz.component'), 
    'TestApp': require('es6-promise-loader!./+Referenz/testApp/testApp.component'), 
    'Test3': require('es6-promise-loader!./+Referenz/test3/test3.component'), 
}; 

我得到一個錯誤從眉ser_adapter.js：84當我導航到TestApp時，無法讀取未定義的屬性「路徑」。什麼是正確的方法來做到這一點？

我還想知道，如果異步加載的組件名稱必須是唯一的整個應用程序？

Answer 1

請參見下面的博客文章 AsyncRoute with Webpack

實現以下

[ 
    new AsyncRoute({ 
     path: '/' 
     , name: RouterService.CONTROL_CENTER_ROUTE 
     , loader:() => new Promise((resolve: any) => { 
      (<any>require).ensure(['control-center.component'] 
      , (require: any) => 
      resolve(require('control-center.component').ControlCenterComponent)); 
     }) 
     , useAsDefault: true 
    }) 
    , new AsyncRoute({ 
    path: '/login' 
    , name: RouterService.LOGIN_ROUTE 
    , loader:() => new Promise((resolve: any) => { 
     (<any>require).ensure(['login.component'] 
     , (require: any) => 
      resolve(require('login.component').LoginComponent)); 
    }) 
    }) 
];