Angular2 - chunk failed error

Question

I am using angular2 with webpack version: 3.11.0. Angular cli : 2.3.1

I have created a build using ng build command as usual. But after deploying it in server, while routing to some menu items, the following errors occurs:

vendor.6e96d626475ec727c65d.bundle.js:1235 EXCEPTION: Uncaught (in promise): Error: Loading chunk 1 failed.
Error: Loading chunk 1 failed.

Can anyone tells what is the problem?

Answer 1

The error is due to the exception throws from the router module. As a solution to this, We can catch this exception like below:

import {Router, NavigationEnd} from '@angular/router';

constructor(private router: Router) {}

clickMenu(state, child = '') {
    this.router.navigate([state + '/' + child]).then(()=>{
        this.displayLoader--;
    }).catch(err => {
        console.log("Router navigate err");
        console.log(err);
        location.reload();
    });
}

The problem is server dependent. ie the same build is throwing the error in the testing server but not in local and production servers.