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

Question

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

Я получаю сообщение об ошибке от browser_adapter.js:84 Не удается прочитать свойство 'путь' из неопределенного при переходе к TestApp. Как правильно это сделать?

Интересно также, должны ли имена компонентов для асинхронной загрузки быть уникальными для всего приложения?

Answer 1

Смотрите следующее сообщение в блоге AsyncRoute с 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));
    })
  })
];