Angular 2(v5)应用程序中的延迟加载模块

时间:2018-01-05 01:25:58

标签: angular typescript webpack module lazy-loading

我在Angular 2(版本5.1.3)项目中进行延迟加载时遇到问题。

我正在关注Todd Motto关于此Lazy Loading Code Splitting的文章,并且无法完成最后一英里的工作。

我有一个包含多个模块的应用程序,其中一些我想延迟加载(大多数用户不使用该功能,并且应用程序本身很大,捆绑了所有内容)。

app.module route config如下所示:

export const routes: Routes = [
  { path: '', 
    redirectTo: 'login', 
    pathMatch: 'full'
   },
  { path: 'login', 
    component: LoginComponent
  },
  { path: 'home', 
    component: HomeComponent
  },
  { path: 'reports-engine', 
    loadChildren: './reportsengine/reportsengine.module#ReportsEngineModule'
  },
  { path: '**', 
    component: NotFoundComponent
  }
];

ReportsEngine模块:

export const routes: Routes = [
  {
    path: '', 
    component: ReportsComponent,
    children: [{ 
      path: '', 
          redirectTo: 'reports-engine',
          pathMatch: 'full'
        },
      { 
      path: 'account', 
          component: Account
        },
      { 
      path: 'accounts-manage', 
          component: AccountsManage
        },
      {
      path: '**', 
          component: NotFoundComponent
      }]
  }
];

我的webpack.config(相关部分)在这里:

output: {
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
    path: path.resolve(cwd, 'build'),
    publicPath: './build/',
    sourceMapFilename: '[name].map'
},

rules.push({
    test: /\.ts$/, 
        loaders: [
            'awesome-typescript-loader',
            'angular2-template-loader'
        ] ,
    test: /\.(ts|js)$/,
        loaders: [
            'angular-router-loader'
        ] ,
    include: [
        path.resolve(cwd, 'app')
    ]
});

目前它只构建主要的app.js和vendor.js文件(和.map文件),而不是0.chunk.js等文件。

当我导航到/ reports-engine网址时,我找不到'页面,我期待ReportsComponent。

我不确定我错过了什么。

1 个答案:

答案 0 :(得分:0)

ReportEngine模块。

export const routes: Routes = [
  {
    path: '', 
    component: ReportsComponent,
    children: [    
      { 
        path: 'account', 
        component: Account
      },
      { 
        path: 'accounts-manage', 
        component: AccountsManage
      },
      {
        path: '**', 
        component: NotFoundComponent
      }
    ]
  }
];

改变就像这样,它会起作用。

如果你想要孩子的道路:'' - >像这样检查

 children: [
      {
        path: '',
        component: AboutComponent
      }
 ]

如果您有任何疑问,请访问此链接,只是进行延迟加载

https://scotch.io/courses/routing-angular-2-applications/lazy-loading

我希望它会有所帮助。