使用webpack进行Angular 4延迟加载

Question

最近我从角度2升级到角度4.3.2，并且对于我从webpack 2跳到webpack 3.4.1的webpack做了同样的事情。网站启动和运行，但由于某种原因，角度停止工作的所有延迟加载。

这是app模块：

    import { NgModule  } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent } from './components/app/app.component'
import { APP_ROUTES } from './app.routes';
import { PublicComponent } from './components/layouts/public/public.component'
import { LoginComponent } from './components/login/login.component'
import { FormsModule } from '@angular/forms';
import { UserService } from './services/user.service'
import { Guard } from './Guard'
import { HttpModule } from '@angular/http';

@NgModule({
    bootstrap: [AppComponent],
    providers: [
        UserService,
        Guard
    ],
    declarations: [
        AppComponent,
        PublicComponent,
        LoginComponent
    ],
    imports: [
        BrowserModule.withServerTransition({appId : 'app'}),
        BrowserAnimationsModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot(APP_ROUTES)
    ]
})
export class AppModule {
}

这里是app_routes：

    import { PublicComponent } from './components/layouts/public/public.component'
import { LoginComponent } from './components/login/login.component'
import { ModuleWithProviders } from '@angular/core'
import {Router, RouterModule} from '@angular/router'


import { Guard } from './Guard'
import { Routes } from '@angular/router'

const PUBLIC_ROUTES: Routes = [
    { path: '', component: LoginComponent }
]

export const APP_ROUTES: Routes = [
    //{ path: '', redirectTo: 'home', pathMatch: 'full', },
    { path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
    //{ path: 'client', component : CreateMemberComponent  ,data: { title: 'Secure Views' } }

    { path: 'client', loadChildren:  './lazy.module#LazyModule'   }


];

客户端URL上的

我想加载看起来像这样的LazyModule：

    import { NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { ClientComponent } from './components/layouts/client/client.component'
import { FormsModule } from '@angular/forms';
import { Guard } from './Guard'
import { MemberListComponent } from './components/ClientArea/member/memberlist.component'
import { CreateMemberComponent } from './components/ClientArea/member/createmember.component'


export const subRoutes: Routes = [
    {
        path: '', component: ClientComponent, canActivate: [Guard],
        children: [
           OTHER LAZY LOADED MODULES
        ] 
    }  

];

@NgModule({
    providers: [
        Guard
    ],
    declarations: [
        ClientComponent
    ],
    imports: [
        FormsModule,
        RouterModule.forChild(subRoutes),
        CommonModule
    ]   
})
export class LazyModule {
}

这里是webpack.config文件，我多次检查chunkFilename属性设置。

var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
var merge = require('webpack-merge');
var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/;
var CompressionPlugin = require('compression-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('apix.css');

console.log('@@@@@@@@@ USING DEVELOPMENT @@@@@@@@@@@@@@@');
const ROOT = path.resolve(__dirname);
// Configuration in common to both client-side and server-side bundles
var sharedConfig = {

    resolve: { extensions: ['.js', '.ts'] },
    output: {
        filename: '[name].js',
        chunkFilename: 'chunk.[name].js',
        publicPath: '/dist/'
    },
    plugins: [
      extractCSS
    ],
    module: {
        loaders: [
            {
                test: /\.ts$/, include: /ClientApp/,
                loaders: ['ts-loader', 'angular-router-loader']
            },
            { test: /\.html$/, loader: 'raw-loader' },
            //{ test: /\.css$/, loader: 'to-string!css' },
            //{ test: /\.css$/, loader: 'to-string!css' },
            { test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
        ]
    }
};

// Configuration for client-side bundle suitable for running in browsers
var clientBundleConfig = merge(sharedConfig, {
    entry: {
        'main-client': ['./ClientApp/boot-client.ts']
    },
    devtool: isDevBuild ? 'inline-source-map' : null,
    plugins: [
         extractCSS,
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
         })
    ].concat(
[
        new webpack.optimize.OccurrenceOrderPlugin(),
               new webpack.optimize.UglifyJsPlugin({
                   minimize: true,
                   //compress: {
                   //    unused: true,
                   //    dead_code: true, // big one--strip code that will never execute
                   //    warnings: false, // good for prod apps so users can't peek behind curtain
                   //    drop_debugger: true,
                   //    conditionals: true,
                   //    evaluate: true,
                   //    drop_console: true, // strips console statements
                   //    sequences: true,
                   //    booleans: true,
                   //}
               })
,
  new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
  })
])
});

// Configuration for server-side (prerendering) bundle suitable for running in Node
var serverBundleConfig = merge(sharedConfig, {
    entry: { 'main-server': './ClientApp/boot-server.ts' },
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, './ClientApp/dist')
    },
    target: 'node',
    devtool: 'inline-source-map',
    externals: [nodeExternals({ whitelist: [allFilenamesExceptJavaScript] })] // Don't bundle .js files from node_modules
});

module.exports = [clientBundleConfig
    //,
    //serverBundleConfig
];

我已经坚持这个问题一个星期了，不知道如何解决这个问题。我用于webpack的路由加载器是angular-router-loader，如果它与webpack 3兼容，我找不到任何地方？有没有人有同样的问题？