Unreliable build hashes when running `ng build --aot` and after using `ng eject`

[emilio-martinez]

Versions

Angular CLI: 1.5.4 (e)
Node: 6.11.1
OS: darwin x64
Angular: 5.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.4
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.21
@angular-devkit/schematics: 0.0.37
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.4
@schematics/angular: 0.1.7
typescript: 2.4.2
webpack-concat-plugin: 1.4.0
webpack-dev-server: 2.9.4
webpack: 3.8.1

Repro steps

The following are the exact commands I'm taking to reproduce. The items of note here are the "main" hashes (not the chunk or bundle hashes), which I'm marking with <===== to the right of each relevant hash.

➜  ng new testHash
...
➜  Desktop cd testHash
...
➜  testHash git:(master) ng build --prod
Date: 2017-11-26T08:56:50.130Z                                                          
Hash: 5a07dd3af5441b340e31 <=====
Time: 19908ms
chunk {0} polyfills.ad37cd45a71cb38eee76.bundle.js (polyfills) 60.8 kB [initial] [rendered]
chunk {1} main.ffbb21fa33d0e637d7cc.bundle.js (main) 152 kB [initial] [rendered]
chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes [initial] [rendered]
chunk {3} inline.723114ead04c6055da6b.bundle.js (inline) 1.45 kB [entry] [rendered]
➜  testHash git:(master) ng build --prod
Date: 2017-11-26T08:57:14.938Z                                                          
Hash: 5a07dd3af5441b340e31 <=====
Time: 19708ms
chunk {0} polyfills.ad37cd45a71cb38eee76.bundle.js (polyfills) 60.8 kB [initial] [rendered]
chunk {1} main.ffbb21fa33d0e637d7cc.bundle.js (main) 152 kB [initial] [rendered]
chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes [initial] [rendered]
chunk {3} inline.723114ead04c6055da6b.bundle.js (inline) 1.45 kB [entry] [rendered]
➜  testHash git:(master) ng eject --prod --aot
...
➜  testHash git:(master) npm i
...
➜  testHash git:(master)  npm run build
Hash: 061aac4c0e51c4c0ca29 <=====
Version: webpack 3.8.1
Time: 18669ms
                                   Asset       Size  Chunks             Chunk Names
polyfills.245d62a283551f04431d.bundle.js    60.8 kB       0  [emitted]  polyfills
     main.eabb13002b0ed154f44b.bundle.js     152 kB       1  [emitted]  main
   inline.c21ac12d3c43e4c7c0c1.bundle.js    1.45 kB       3  [emitted]  inline
  styles.d41d8cd98f00b204e980.bundle.css    0 bytes       2  [emitted]  styles
                             favicon.ico    5.43 kB          [emitted]  
                            ./index.html  591 bytes          [emitted]  
                    3rdpartylicenses.txt    3.29 kB          [emitted] 
...
➜  testHash git:(master) npm run build
Hash: 12e3523ac034f26a628d <=====
Version: webpack 3.8.1
Time: 19587ms
                                   Asset       Size  Chunks             Chunk Names
polyfills.245d62a283551f04431d.bundle.js    60.8 kB       0  [emitted]  polyfills
     main.eabb13002b0ed154f44b.bundle.js     152 kB       1  [emitted]  main
   inline.c21ac12d3c43e4c7c0c1.bundle.js    1.45 kB       3  [emitted]  inline
  styles.d41d8cd98f00b204e980.bundle.css    0 bytes       2  [emitted]  styles
                             favicon.ico    5.43 kB          [emitted]  
                            ./index.html  591 bytes          [emitted]  
                    3rdpartylicenses.txt    3.29 kB          [emitted]

Observed behavior

After ng eject the main hash are not reliably the same, regardless of no change. Interestingly enough, the chunkhashes are the same, but the main hash changes.

Desired behavior

Running the build task two times consecutively should render the same results. This may be related to a plugin order issue.

[filipesilva]

I'm sorry but I'm not really sure what we can do about this here. After ejecting you're just running webpack with the given config file. Maybe their stat reporting shows a different hash than ours?

Maybe you can get some more information on their issue tracker.

[emilio-martinez]

@filipesilva I may be looking in the wrong spot, but angular-cli seems to be displaying the default hash that webpack provides, which is literally the hash at the root of the stats object (https://github.com/angular/angular-cli/blob/master/packages/@angular/cli/utilities/stats.ts#L31).

Regardless of the stats being formatted differently, I don't see why the data would be any different unless webpack has a bug on how they generate their hash, which potentially would show before ejecting as well. Maybe I'm missing something, and I'd be glad to be proven wrong, but I don't see how this would be a webpack issue.

To clarify, I think this becomes an angular-cli issue because the config in question is literally the unmodified generated config output by ng eject. It would be different if I had modified the config, but as I see it, at this point in time the CLI seems to be out of the box exporting a config that a) doesn't produce the same results and b) doesn't output consistent builds.

Happy to get some clarification if I'm mistaken, and perhaps I'm misunderstanding what eject is supposed to produce, but this seems to me like a notable issue rather than a "nice to have".

[emilio-martinez]

@filipesilva actually, now I'm not getting reproducible hashes using the CLI with build --prod directly. Or rather, I get the same hashes sometimes. See below the output from a freshly generated project without ejecting. Sometimes I get 72c9bb6e6de166055a96 and others I get 8e1864d0a853aa27c89b. Again, this is only for --prod.

➜  Desktop ng --version

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
    
Angular CLI: 1.5.5
Node: 6.11.1
OS: darwin x64
Angular: 
...

➜  Desktop ng new test-project  
  create test-project/README.md (1027 bytes)
  create test-project/.angular-cli.json (1247 bytes)
  create test-project/.editorconfig (245 bytes)
  create test-project/.gitignore (516 bytes)
  create test-project/src/assets/.gitkeep (0 bytes)
  create test-project/src/environments/environment.prod.ts (51 bytes)
  create test-project/src/environments/environment.ts (387 bytes)
  create test-project/src/favicon.ico (5430 bytes)
  create test-project/src/index.html (298 bytes)
  create test-project/src/main.ts (370 bytes)
  create test-project/src/polyfills.ts (2405 bytes)
  create test-project/src/styles.css (80 bytes)
  create test-project/src/test.ts (1085 bytes)
  create test-project/src/tsconfig.app.json (211 bytes)
  create test-project/src/tsconfig.spec.json (304 bytes)
  create test-project/src/typings.d.ts (104 bytes)
  create test-project/e2e/app.e2e-spec.ts (294 bytes)
  create test-project/e2e/app.po.ts (208 bytes)
  create test-project/e2e/tsconfig.e2e.json (235 bytes)
  create test-project/karma.conf.js (923 bytes)
  create test-project/package.json (1317 bytes)
  create test-project/protractor.conf.js (722 bytes)
  create test-project/tsconfig.json (363 bytes)
  create test-project/tslint.json (3097 bytes)
  create test-project/src/app/app.module.ts (316 bytes)
  create test-project/src/app/app.component.css (0 bytes)
  create test-project/src/app/app.component.html (1141 bytes)
  create test-project/src/app/app.component.spec.ts (986 bytes)
  create test-project/src/app/app.component.ts (207 bytes)
Installing packages for tooling via yarn.
Installed packages for tooling via yarn.
Successfully initialized git.
Project 'test-project' successfully created.

➜  Desktop cd test-project 

➜  test-project git:(master) ng build --prod
Date: 2017-11-30T01:51:48.016Z                                                          
Hash: 72c9bb6e6de166055a96
Time: 17447ms
chunk {0} polyfills.026a9068668493734b04.bundle.js (polyfills) 60.9 kB [initial] [rendered]
chunk {1} main.ffbb21fa33d0e637d7cc.bundle.js (main) 152 kB [initial] [rendered]
chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes [initial] [rendered]
chunk {3} inline.b79949c8c4c4d482aec3.bundle.js (inline) 1.45 kB [entry] [rendered]

➜  test-project git:(master) ng build --prod
Date: 2017-11-30T01:52:09.877Z                                                          
Hash: 8e1864d0a853aa27c89b
Time: 16967ms
chunk {0} polyfills.026a9068668493734b04.bundle.js (polyfills) 60.9 kB [initial] [rendered]
chunk {1} main.ffbb21fa33d0e637d7cc.bundle.js (main) 152 kB [initial] [rendered]
chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes [initial] [rendered]
chunk {3} inline.b79949c8c4c4d482aec3.bundle.js (inline) 1.45 kB [entry] [rendered]

➜  test-project git:(master) ng build --prod      
Date: 2017-11-30T01:52:38.913Z                                                          
Hash: 72c9bb6e6de166055a96
Time: 17224ms
chunk {0} polyfills.026a9068668493734b04.bundle.js (polyfills) 60.9 kB [initial] [rendered]
chunk {1} main.ffbb21fa33d0e637d7cc.bundle.js (main) 152 kB [initial] [rendered]
chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes [initial] [rendered]
chunk {3} inline.b79949c8c4c4d482aec3.bundle.js (inline) 1.45 kB [entry] [rendered]

➜  test-project git:(master) ng build --prod
Date: 2017-11-30T01:53:02.962Z                                                          
Hash: 72c9bb6e6de166055a96
Time: 17444ms
chunk {0} polyfills.026a9068668493734b04.bundle.js (polyfills) 60.9 kB [initial] [rendered]
chunk {1} main.ffbb21fa33d0e637d7cc.bundle.js (main) 152 kB [initial] [rendered]
chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes [initial] [rendered]
chunk {3} inline.b79949c8c4c4d482aec3.bundle.js (inline) 1.45 kB [entry] [rendered]
➜  test-project git:(master) ng build --prod

Date: 2017-11-30T01:54:06.081Z                                                          
Hash: 8e1864d0a853aa27c89b
Time: 17281ms
chunk {0} polyfills.026a9068668493734b04.bundle.js (polyfills) 60.9 kB [initial] [rendered]
chunk {1} main.ffbb21fa33d0e637d7cc.bundle.js (main) 152 kB [initial] [rendered]
chunk {2} styles.d41d8cd98f00b204e980.bundle.css (styles) 0 bytes [initial] [rendered]
chunk {3} inline.b79949c8c4c4d482aec3.bundle.js (inline) 1.45 kB [entry] [rendered]

[emilio-martinez]

@filipesilva To follow up on my above comment, I have new findings.

Below I ran ng build in two different configurations five times each one after the other. The first batch is targeting --dev and the second batch is adding --aot still targetting --dev.

The findings: Without AOT, the build consistently outputs the same hashes, so this is perhaps an issue with config passed to webpack when --aot is enabled.

➜  test-project git:(master) ng build
Date: 2017-11-30T01:58:53.686Z                                                          
Hash: 400129614996cb2e091e
Time: 5538ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 7.72 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.29 MB [initial] [rendered]

➜  test-project git:(master) ng build
Date: 2017-11-30T01:59:04.329Z                                                          
Hash: 400129614996cb2e091e
Time: 5559ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 7.72 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.29 MB [initial] [rendered]

➜  test-project git:(master) ng build
Date: 2017-11-30T01:59:13.034Z                                                          
Hash: 400129614996cb2e091e
Time: 5338ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 7.72 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.29 MB [initial] [rendered]

➜  test-project git:(master) ng build
Date: 2017-11-30T01:59:21.663Z                                                          
Hash: 400129614996cb2e091e
Time: 5429ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 7.72 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.29 MB [initial] [rendered]

➜  test-project git:(master) ng build
Date: 2017-11-30T01:59:30.440Z                                                          
Hash: 400129614996cb2e091e
Time: 5401ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 7.72 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.29 MB [initial] [rendered]

Below are the results when just using --aot but targeting dev:

➜  test-project git:(master) ng build --aot
Date: 2017-11-30T02:14:13.549Z                                                          
Hash: 9eace96396e74c3bda6d
Time: 4579ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 21.2 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.06 MB [initial] [rendered]

➜  test-project git:(master) ng build --aot
Date: 2017-11-30T02:14:21.161Z                                                          
Hash: 747e988382a107487106
Time: 4450ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 21.2 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.06 MB [initial] [rendered]

➜  test-project git:(master) ng build --aot
Date: 2017-11-30T02:14:36.675Z                                                          
Hash: 747e988382a107487106
Time: 4367ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 21.2 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.06 MB [initial] [rendered]]

➜  test-project git:(master) ng build --aot
Date: 2017-11-30T02:14:52.263Z                                                          
Hash: 747e988382a107487106
Time: 4409ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 21.2 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.06 MB [initial] [rendered]

➜  test-project git:(master) ng build --aot
Date: 2017-11-30T02:15:08.045Z                                                          
Hash: 9eace96396e74c3bda6d
Time: 4398ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 21.2 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 1.06 MB [initial] [rendered]

[filipesilva]

Ok, this happening on non-ejected problems points to a bigger problem.

It's interesting that this happens in AOT, and that it alternates between two hashes. I've seen something similar to this when I was working on our resource loader (https://github.com/angular/angular-cli/blob/master/packages/@ngtools/webpack/src/resource_loader.ts).

The resource loader is responsible for creating a child webpack compilation to compile CSS/HTML needed by AOT.

I was trying to cache resources by hash when I noticed that hashes for the same resources were not consistent. The same resource could have two different compilation hashes. I looked into for a while but couldn't find out why and was running out of time so I took a different caching approach (I tracked dependencies and did not request a new compilation until they changed).

So I have to guess this problem is related. I still don't know why it happens.

[dinerotah]

After reading links beyond, I think that it is a webpack problem:
what updated hash
Guides - Explain Hash Changes in Caching Guide

[emilio-martinez]

@Taha-Di-Nero I agree that there are a multitude of reasons, sometimes clearer than others, as to why webpack hashes change. In this instance the issue that has particularly caught my attention is that the compilation hash changes after seemingly nothing else has—not adding a chunk, nothing lazy loading, and no source code changes whatsoever.

As mentioned above, if that's a webpack issue I'd be happy to report it there. However, I haven't necessarily faced this issue in other projects outside of my experience with angular-cli, so it's hard for me to report a specific issue I cannot replicate with another config.