How can I change where lazy-loading Angular 2 looks for chunks?

Question

I have set up lazy loading in my Angular 2 project using the loadChildren syntax. The problem I have is that after chunks are created, the browser doesn't seem to know where to look to find them. It always tries to load chunks from the root directory, e.g. http://localhost:55626/1.chunk.js. This is of course not where they're stored.

I've been able to work around this issue by bundling the chunks using the .NET bundler, but of course this means they're all loaded at start and defeats the purpose of using lazy loading. I'm guessing that this is an issue with webpack defaulting to look in the wrong place for chunks created during ng build but I'm not confident about that, and even if I'm right, I understand that projects built with angular-cli currently do not support a custom webpack.config.js.

Can anyone shed some insight on this problem? Thanks!

I am using Angular 2.4.6.

Edit: To clarify, I build this project using angular-cli, which doesn't support custom webpack.config files, per https://github.com/angular/angular-cli/issues/1656#issuecomment-240171375

Answer 1

It turns out there is a setting in the angular-cli.json file that controls this:

{
  "apps": [
    {
      "deployUrl": "./path/to/files/"
    }
  ]
}

I believe deployUrl should point to the sources output by ng build so they can be bundled up as needed by angular-cli. Note that the path must end in a slash ("/") for lazy-loading to work.

Adding this property fixed the problem for me and I am now loading as lazily as I do everything else.

See https://github.com/angular/angular-cli/issues/5652