如何在 Webpack 中使用 AsyncRoute 异步加载组件？答案

【问题标题】：How do I async load a component with AsyncRoute in Webpack?如何在 Webpack 中使用 AsyncRoute 异步加载组件？
【发布时间】：2016-08-03 06:51:08
【问题描述】：

我对如何让异步模块加载在最新的 angular-webpack-starter（带有 @angular/router 3.0.0-beta.2 的 RC4）中运行感到迷茫。

其中包含一个示例，但它会有助于获得更多解释、做什么以及它们如何一起发挥作用。

我做了什么： - 我导出了我的惰性组件路由：

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 时无法读取未定义的属性“路径”。这样做的正确方法是什么？

我也想知道，异步加载的组件名称是否必须对整个应用程序唯一？

【问题讨论】：

向我们发布您的错误信息。

标签： angular webpack angular2-router3

【解决方案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));
    })
  })
];

【讨论】：