ng build --prod is not creating unique hashes

[JohnGalt1717]

Versions

`Angular CLI: 6.0.0
Node: 8.10.0
OS: win32 x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.0
@angular-devkit/build-angular 0.6.0
@angular-devkit/build-optimizer 0.6.0
@angular-devkit/core 0.6.0
@angular-devkit/schematics 0.6.0
@ngtools/webpack 6.0.0
@schematics/angular 0.6.0
@schematics/update 0.6.0
rxjs 6.1.0
typescript 2.7.2
webpack 4.6.0`

Repro steps

1. Create a site with ng new
2. Add a lazy path with loadChildren
3. ng build --prod

Observed behavior

Every time production build happens the hashes in the chunks do not change.

Desired behavior

Every single --prod build should result in unique hashes for cache busting.

Mention any other details that might be useful (optional)

Not sure if this is an issue with Angular cli or with webpack but it's definitely effecting Angular. I believe it's also in 5.2.10.

Not sure if this is windows only, but it happens locally on Windows and in VSTS hosted build.

[filipesilva]

I think you're having some weird errors and can't debug it, and so, understandably, you're frustrated. But this is a tracker for bugs and feature requests. If we can we also try to help with support requests. We're very lucky to have awesome community members that also spend time trying to help people here in the issue tracker.

But we can't really help much at all if you don't fill in the issue template. I read your issue and have no idea what's going wrong and how to help you. And when other users search the issue tracker and see your issue, it also doesn't help them.

So I think the best thing to do is to close this issue, and ask you to open a new one. In that new one please fill in the issue template and give us an idea of what's happening and how to reproduce it. That way we'll have a chance to help you.

[JohnGalt1717]

What part of the issue template isn't filled in?

The repro steps?

ng new project name
Add a lazy loaded route
ng build --prod
wait for it to finish
ng build --prod
wait for it to finish.

Observe that the hashes are IDENTICAL. They shouldn't be. Every time prod code is built every chunk should have unique hashes in the file name for cache busting per the documentation.

Didn't think I need to state the obvious with an issue of angular-cli or webpack not creating new hashes on production build, it's self-explanatory.

[JohnGalt1717]

And for the record I did fill in the entire template, but the output of ng --version that it instructs to copy and paste borks GitHub markdown. I've cleaned it up.

[filipesilva]

Thank you for cleaning up the output and clarifying the information.

We change the hashes per bundle content, not per build. So between two builds, if the content of the bundle did not change, the hash will not change.

[JohnGalt1717]

Ok, well it definitely isn't working right because I can make changes and it still isn't updating the hashes. We're getting constant complaints from people about bugs we've already fixed and telling them to clear their cache is fixing it. I have yet to see even one file change it's hash build to build event with changes.

[filipesilva]

Ok that is odd, we test for that in https://github.com/angular/devkit/blob/master/packages/angular_devkit/build_angular/test/browser/output-hashing_spec_large.ts.

I did a simple test right now by adding console.log('hello') to main.ts and I do see the hash changing:

kamik@RED-X1C6 MINGW64 /d/sandbox/latest-project (master)
$ ng build --prod

Date: 2018-05-04T19:37:41.519Z
Hash: f25fd6788a4969c52b70
Time: 13076ms
chunk {0} runtime.6afe30102d8fe7337431.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.6c08419970f9e4781b69.js (polyfills) 59.4 kB [initial] [rendered]
chunk {3} main.5c2aab6a636f72a9a865.js (main) 153 kB [initial] [rendered]

kamik@RED-X1C6 MINGW64 /d/sandbox/latest-project (master)
$ ng build --prod

Date: 2018-05-04T19:38:07.685Z
Hash: 41d53ef1d6943f2cd0e2
Time: 9482ms
chunk {0} runtime.6afe30102d8fe7337431.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.6c08419970f9e4781b69.js (polyfills) 59.4 kB [initial] [rendered]
chunk {3} main.2f847dc2015268319a27.js (main) 153 kB [initial] [rendered]

You example mentions adding a lazy route though. Can you be more specific? I don't know how you're adding it, and small differences in how you do it can have different behaviours.

Can you make a simple repro where you see this happening and upload it to github? Ideally I would be able to clone it, checkout a commit, ng build --prod, then checkout the another commit with changes, ng build --prod and see no hash change.

[JohnGalt1717]

Here's our base routemodule:

	RouterModule.forRoot([
		{ path: 'free30daytrial', component: TrialComponent },
		{ path: 'downloads', loadChildren: './downloads/downloads.module#DownloadsModule' },
		{ path: 'contact', loadChildren: './contact/contact.module#ContactModule' },
		{ path: 'legal', loadChildren: './legal/legal.module#LegalModule' },
		{ path: 'product', loadChildren: './product/product.module#ProductModule' },
		{ path: 'lesson', loadChildren: './lesson/lesson.module#LessonModule' },
		{ path: 'search', loadChildren: './search/search.module#SearchModule' },
		{ path: 'account', loadChildren: './account/account.module#AccountModule' },
		{ path: 'user', loadChildren: './user/user.module#UserModule', canActivate: [CanActivateUserGuard] },
		{ path: 'organization', loadChildren: './organization/organization.module#OrganizationModule', canActivate: [CanActivateOrganizationGuard] },
		{ path: 'custom', loadChildren: './custom/custom.module#CustomContentModule', canActivate: [CanActivateOrganizationContentCreatorGuard] },
		{ path: 'partner', loadChildren: './partner/partner.module#PartnerModule', canActivate: [CanActivatePartnerSalesGuard] },
		{ path: 'markets', loadChildren: './markets/markets.module#MarketsModule' },
		{ path: 'reports', loadChildren: './reports/reports.module#ReportsModule', canActivate: [CanActivateOrganizationGuard] },
		{ path: 'assessments', loadChildren: './assessments/assessments.module#AssessmentsModule' },
		{ path: 'support', loadChildren: './support/support.module#SupportModule' },
		{ path: 'about', loadChildren: './about/about.module#AboutModule' },
		{ path: 'projects', loadChildren: './projects/projects.module#ProjectsModule', canActivate: [CanActivateProjectGuard] },
		{ path: 'expert', loadChildren: './expert/expert.module#ExpertModule' },
		{ path: '', pathMatch: 'full', loadChildren: './home/home.module#HomeModule' }
		//{ path: '**', redirectTo: '' }
	])

Each module also has sub routes that are lazy loaded.

These generate chunks. No matter what chunk you change I get the same hash.

While I have seen it sometimes on my local computer, build to build change this way, on VSTS hosted build servers which blow away everything you just did every session and thus don't have cache, I get exactly the same hashes always (15 builds today, no difference to 31 chunks even though 6 chunks have changed from check-ins today)

[JohnGalt1717]

This is still an issue with 6.0.1

[filipesilva]

I'm not sure what's happening on your VSTS build server and personally don't have one to investigate myself. Without being able to reproduce myself there just isn't much I can do.

On your local machine though, you say it changes so it does sound like it's related to the build server environment. If you can get me a reproduction that I can run on my machine and see this I am happy to investigate, but without one there isn't much hope of fixing the problem.

I can say that we don't do anything special with hashes though. If you can't provide me with a reproduction that doesn't need a specific server, maybe you can try to setup a simple reproduction with just webpack and see if the problem manifests on your server as well, then submit an issue on the webpack repo.

[JohnGalt1717]

VSTS clears EVERYTHING between every build because the build server is a shared resource.

So you should be able to test this by simply whipping everything including all caches for angular/webpack every single time you do a build. It appears that it restarts whatever randomizer is being used and it starts at the first number again resulting in identical hashes.

[davitPetrosyanT]

I am using Angular 5.2 with angular/cli 1.7.4 and also facing the same issue, for example I have lazy loaded module where I am providing service and using some value from service in html, even after I am updating that services ts file prod build does not change the chunks hash, and as a result we are having caching issues

[simmash]

I have facing the same issue since the hash do not change the browser does not load the changes in the page as it continues using cached version.
Angular CLI: 1.7.4
Node: 8.11.3
Angular: 5.2.7