Question

我在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网址时，我找不到＆＃39;页面，我期待ReportsComponent。

我不确定我错过了什么。

Answer 1

ReportEngine模块。

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

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

如果你想要孩子的道路：＆＃39;＆＃39; - ＆gt;像这样检查

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

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

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

我希望它会有所帮助。

Angular 2（v5）应用程序中的延迟加载模块

1 个答案: