title: Angular 4 lazy loading with webpack
body: <p>recently i upgraded from angular 2 to angular 4.3.2, and did same for webpack where i jumped from webpack 2 to webpack 3.4.1. Website starts and running, however, for some reason all the lazy loading in angular stopped working. </p>
  
  <p>here is the app module : </p>
  
  <pre><code>    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 {
  }
  </code></pre>
  
  <p>here is app_routes : </p>
  
  <pre><code>    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'   }
  
  
  ];
  </code></pre>
  
  <p>on client url i want to load LazyModule which is looking like this : </p>
  
  <pre><code>    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 {
  }
  </code></pre>
  
  <p>here is webpack.config file, where i did check multiple times that chunkFilename property is set. </p>
  
  <pre><code>var isDevBuild = process.argv.indexOf('--env.prod') &lt; 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
  ];
  </code></pre>
  
  <p>I've been stuck with this problem for a week now, and don't know how to solve this. The route loader i am using for webpack is angular-router-loader, i couldn't find anywhere if it is compatible with webpack 3? Did anyone had same problems? </p>