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

Question

I'm having trouble making lazy loading work on an Angular 2 (version 5.1.3) project.

I'm following Todd Motto's article on this Lazy Loading Code Splitting , and can't quite make the last mile to get it working.

I have an app with multiple modules, several of which I want to lazy load (most users don't use the functionality, and the app itself is large with everything bundled in).

The app.module route config looks like this:

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
  }
];

And the ReportsEngine module:

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
      }]
  }
];

My webpack.config (the relevant parts) are here:

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')
    ]
});

Currently it's only building the main app.js and vendor.js files (and .map files), not the 0.chunk.js etc. files.

And when I navigate to the /reports-engine url, I get a 'page not found', which I'm expecting the ReportsComponent.

I'm not sure what I'm missing.

Answer 1

ReportEngine Module.

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

Change Like this it will work.

if you want children path:'' ->check put like this

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

if you have any doubt please visit this link it is simply to do the lazy loading

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

I hope it will help.