Angular2 Webpack Lazy Loading Routes Giving 404

Question

Using RC6

404 error for modules which are lazy loaded using webpack.

Webpack not bundling lazy loaded modules

I tried both

{path: 'admin', loadChildren: 'src/admin/config/admin.module'},

and

{path: 'admin', loadChildren: 'src/admin/config/admin.module#AdminModule'},

but nothing is working

is there anyway to tell webpack that consider lazy loaded modules for bundling along with actual module.

app.module

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    SharedModule.forRoot()
],
declarations: [
    AppComponent,
    ValidateComponent,
],
bootstrap: [AppComponent]

app.routing

 const appRoutes = [
{path: '', redirectTo: '/validate', pathMatch: 'full'},
{path: 'admin', loadChildren: 'src/admin/config/admin.module'},
{path: 'reader', loadChildren: 'src/reader/config/reader.module'},
{path: 'validate', component: ValidateComponent}];
export const routing = RouterModule.forRoot(appRoutes);

webpack.config.js

var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
entry:{
    app:"./src/app/main"
},
output:{
    filename:"./dist/app/[name].js",
    chunkFilename: '[id].[hash].chunk.js'
},
resolve:{
    extensions:["",".js",".ts"]
},
module:{
    loaders:[
    {
        test: /\.ts$/,
        loaders: ['angular2-template-loader','ts-loader'],
        exclude: /node_modules/
    },
    {
        test: /\.html$/,
        loader: 'html'
    }]
},
plugins: [new webpack.NoErrorsPlugin()]

index.html

<body>
    <archive id="recordsApp" class=""> Loading...</archive>
    <div id="loading">
        <center>
            <img id="loadingImg" class="shadowImg" src="assets/images/loading.gif">
        </center>
    </div>
    <script src="dist/app/app.js"></script>
</body>

Answer 1

This resolved my issue and I am using typescript 2.0.2

require('es6-promise!./crisis-center/crisis-center.module')('CrisisCenterModule');

webpack is creating chunks while bundling for different modules & loading them when ever we route to new module.

Answer 2

You can lazy load your modules by using:

{path:"lazy", loadChildren: () => require('es6-promise!./path/to/module')('ClassName')}

es6-promise-loader npm module is required.

Angular2 Webpack Lazy Loading Routes Giving 404

Question

2 answers

solution1
0 ACCPTED 2016-09-20 07:43:44

solution2
0 2016-09-23 18:28:32

Angular2 Webpack Lazy Loading Routes Giving 404

Question

2 answers

solution1 0 ACCPTED 2016-09-20 07:43:44

solution2 0 2016-09-23 18:28:32

solution1
0 ACCPTED 2016-09-20 07:43:44

solution2
0 2016-09-23 18:28:32