Как выполнить асинхронную загрузку компонента с помощью AsyncRoute в Webpack?

Question

Я потерял свое понимание, как загрузить загрузку асинхронного модуля для запуска в последнем угловом webpack-стартере (RC4 с @ angle/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)); 
    }) 
    }) 
];