FIXED: Error: Loading chunk failed after upgrading to @angular/cli 1.3, 1.4+

I recently upgraded @angular/cli from version 1.2.4 to version 1.4.2. and ran into a nasty problem. None of the chunks would load (chunk.js are lazy-loaded modules).

The problem looked like this:

If you don’t know, chunks are loaded from the root directory (http://localhost:49989/common.chunk.js) so we need a url rewrite rule to redirect chunk.js requests to the /dist folder.

The rewrite rule looks like this:

<rewrite>
    <rules>
        <rule name="SpecificRewrite" stopProcessing="true">
            <match url="(^[0-9]*\..*chunk\.js.*)" />
            <action type="Rewrite" url="/Dist/{R:1}" />
        </rule>
    </rules>
</rewrite>

The problem is the chunk names have changed in version 1.3+. Chunks now have proper names (instead of 0, 1, 2 etc.)

To fix the problem I needed to change the rewrite rule to look for any file ending chunk.js (rather than files beginning with a digit and ending chunk.js)

<match url="(^.*chunk\.js.*)" />

That’s it. Simple when you know how.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.