Subresource Integrity for lazy modules is broken when DL is enabled and built twice

[garyluu]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

No

Description

Essentially #15468 but when it's built and served twice. Not entirely certain this is an Angular CLI issue or something else.

🔬 Minimal Reproduction

ng new lazy-loading-dl --routing
cd lazy-loading-dl
ng g m foo --module app.module --route foo

Add the below in app.component.html

<a [routerLink]="['/foo']" >
  link to foo
</a>

Modify .browserslistrc to:

IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

ng build --prod --subresourceIntegrity
http-server dist/lazy-loading-dl

Open browser and click on the link

It actually works fine now. But if it's built and serve again...

ng build --prod --subresourceIntegrity
http-server dist/lazy-loading-dl

Open browser and click on the link

🔥 Exception or Error

Failed to find a valid digest in the 'integrity' attribute for resource 'http://172.18.32.241:8080/5-es2015.a5af45f7e0101b140303.js' with computed SHA-256 integrity 'YvV2TrorBiLg4h/QtsfaCovVX2dSUOJIDQvf8U/QRog='. The resource has been blocked.
main-es2015.53d237a6e970dc0165dc.js:1 ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 5 failed.
(error: http://172.18.32.241:8080/5-es2015.a5af45f7e0101b140303.js)
ChunkLoadError: Loading chunk 5 failed.
(error: http://172.18.32.241:8080/5-es2015.a5af45f7e0101b140303.js)
    at Function.a.e (runtime-es2015.f9e60a9c4b9936dce849.js:1)
    at loadChildren (main-es2015.53d237a6e970dc0165dc.js:1)
    at En.loadModuleFactory (main-es2015.53d237a6e970dc0165dc.js:1)
    at En.load (main-es2015.53d237a6e970dc0165dc.js:1)
    at u.project (main-es2015.53d237a6e970dc0165dc.js:1)
    at u._tryNext (main-es2015.53d237a6e970dc0165dc.js:1)
    at u._next (main-es2015.53d237a6e970dc0165dc.js:1)
    at u.next (main-es2015.53d237a6e970dc0165dc.js:1)
    at t._subscribe (main-es2015.53d237a6e970dc0165dc.js:1)
    at t._trySubscribe (main-es2015.53d237a6e970dc0165dc.js:1)
    at T (polyfills-es2015.95bb65e853d2781ac3bd.js:1)
    at T (polyfills-es2015.95bb65e853d2781ac3bd.js:1)
    at polyfills-es2015.95bb65e853d2781ac3bd.js:1
    at l.invokeTask (polyfills-es2015.95bb65e853d2781ac3bd.js:1)
    at Object.onInvokeTask (main-es2015.53d237a6e970dc0165dc.js:1)
    at l.invokeTask (polyfills-es2015.95bb65e853d2781ac3bd.js:1)
    at i.runTask (polyfills-es2015.95bb65e853d2781ac3bd.js:1)
    at m (polyfills-es2015.95bb65e853d2781ac3bd.js:1)
    at u.invokeTask [as invoke] (polyfills-es2015.95bb65e853d2781ac3bd.js:1)
    at p (polyfills-es2015.95bb65e853d2781ac3bd.js:1)

🌍 Your Environment

 ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 10.0.2
Node: 12.14.1
OS: linux x64

Angular: 10.0.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.2
@angular-devkit/build-angular     0.1000.2
@angular-devkit/build-optimizer   0.1000.2
@angular-devkit/build-webpack     0.1000.2
@angular-devkit/core              10.0.2
@angular-devkit/schematics        10.0.2
@angular/cli                      10.0.2
@ngtools/webpack                  10.0.2
@schematics/angular               10.0.2
@schematics/update                0.1000.2
rxjs                              6.5.5
typescript                        3.9.6
webpack                           4.43.0

Anything else relevant?

The integrity injected in the HEAD is correct the first time, but is not the second time

[ktsangop]

Using Angular 9.1.11 at the moment and experiencing a related issue. Spent quite some time debugging this, so hopefully this helps someone else.

When using this custom builder I am getting wrong SHA checksums, and my lazy loaded modules cannot be parsed :
https://github.com/just-jeb/angular-builders

But, if I remove the custom builder script, and build using the the default @angular-devkit builder, the SHA checksums are computed correctly, and everything works as expected.

You can actually inspect the lazy loaded modules' (*.js chunks) integrity checksums if you open the
runtime-*.js file on your build output directory.

So it looks like a @angular-builders bug, at least for my setup.

UPDATE
For what's worth, and after looking at the #19093 fix, I would like to add that the issue has nothing to do with @angular-builders package.
It just seems that the SRI checksums are not always broken, and in my case it looked like without the custom builder it was working.
After creating more lazy loaded modules in my app, I faced this problem again, even without the @angular-builders package.

The only thing that helps, until #19093 is ported to version 9 (9.1.13 hopefully), is to disable differential loading by setting
target: "es5" in tsconfig.json.