CODEWITHSUNDEEP
angularwebpack
Nat Webb
Nat Webb

Reputation: 708

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

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

Upvotes: 2

Views: 3275

Answers (2)

Nat Webb
Nat Webb

Reputation: 708

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

Upvotes: 10

Syntactic Fructose
Syntactic Fructose

Reputation: 20114

Chunks can be found by configuring webpack with angular2-router-loader. to do so:

Install angular2-router loader

npm install --save-dev angular2-router-loader

Add the loader to your webpack

loaders: [
  {
    test: /\.ts$/,
    loaders: [
      ‘awesome-typescript-loader’, 
      ‘angular2-template-loader’, 
      ‘angular2-router-loader’]
   },
   ...
]

Then, webpack should automatically know how to load and find your chunks.

Upvotes: 0

Related Questions