From 7013d29769a83893e01d131f3b53d0b2e58b339d Mon Sep 17 00:00:00 2001
From: Alan Agius <alan.agius4@gmail.com>
Date: Thu, 23 Aug 2018 11:43:48 +0200
Subject: [PATCH] fix(@angular-devkit/build-angular): build should not hash
 lazy styles

When having `optimize` enabled the chunk Id doesn't match the bundle name, this we should use the chunk name instead

Closes #11772 and Closes #11704
---
 .../models/webpack-configs/styles.ts           |  9 ++++-----
 .../plugins/remove-hash-plugin.ts              | 13 +++++++------
 .../test/browser/output-hashing_spec_large.ts  | 18 ++++++++++++++++++
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts
index 066ce23b3a42..caccce3b4a1a 100644
--- a/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts
+++ b/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts
@@ -15,7 +15,6 @@ import { getOutputHashFormat } from './utils';
 import { WebpackConfigOptions } from '../build-options';
 import { findUp } from '../../utilities/find-up';
 import { RawCssLoader } from '../../plugins/webpack';
-import { ExtraEntryPoint } from '../../../browser/schema';
 import { normalizeExtraEntryPoints } from './utils';
 import { RemoveHashPlugin } from '../../plugins/remove-hash-plugin';
 
@@ -174,7 +173,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
 
   // Process global styles.
   if (buildOptions.styles.length > 0) {
-    const chunkIds: string[] = [];
+    const chunkNames: string[] = [];
 
     normalizeExtraEntryPoints(buildOptions.styles, 'styles').forEach(style => {
       const resolvedPath = path.resolve(root, style.input);
@@ -188,16 +187,16 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
 
       // Add lazy styles to the list.
       if (style.lazy) {
-        chunkIds.push(style.bundleName);
+        chunkNames.push(style.bundleName);
       }
 
       // Add global css paths.
       globalStylePaths.push(resolvedPath);
     });
 
-    if (chunkIds.length > 0) {
+    if (chunkNames.length > 0) {
       // Add plugin to remove hashes from lazy styles.
-      extraPlugins.push(new RemoveHashPlugin({ chunkIds, hashFormat}));
+      extraPlugins.push(new RemoveHashPlugin({ chunkNames, hashFormat}));
     }
   }
 
diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/remove-hash-plugin.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/remove-hash-plugin.ts
index 2dc1e814e3b8..0a9717bea1ed 100644
--- a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/remove-hash-plugin.ts
+++ b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/remove-hash-plugin.ts
@@ -10,7 +10,7 @@ import { HashFormat } from '../models/webpack-configs/utils';
 
 
 export interface RemoveHashPluginOptions {
-  chunkIds: string[];
+  chunkNames: string[];
   hashFormat: HashFormat;
 }
 
@@ -25,14 +25,15 @@ export class RemoveHashPlugin {
       };
 
       mainTemplate.hooks.assetPath.tap('remove-hash-plugin',
-        (path: string, data: { chunk?: { id: string } }) => {
-          const chunkId = data.chunk && data.chunk.id;
+        (path: string, data: { chunk?: { name: string } }) => {
+          const chunkName = data.chunk && data.chunk.name;
+          const { chunkNames, hashFormat } = this.options;
 
-          if (chunkId && this.options.chunkIds.includes(chunkId)) {
+          if (chunkName && chunkNames.includes(chunkName)) {
             // Replace hash formats with empty strings.
             return path
-              .replace(this.options.hashFormat.chunk, '')
-              .replace(this.options.hashFormat.extract, '');
+              .replace(hashFormat.chunk, '')
+              .replace(hashFormat.extract, '');
           }
 
           return path;
diff --git a/packages/angular_devkit/build_angular/test/browser/output-hashing_spec_large.ts b/packages/angular_devkit/build_angular/test/browser/output-hashing_spec_large.ts
index 56390f91d42a..99ac52e72860 100644
--- a/packages/angular_devkit/build_angular/test/browser/output-hashing_spec_large.ts
+++ b/packages/angular_devkit/build_angular/test/browser/output-hashing_spec_large.ts
@@ -180,4 +180,22 @@ describe('Browser Builder output hashing', () => {
       }),
     ).toPromise().then(done, done.fail);
   });
+
+  it('does not hash lazy styles when optimization is enabled', (done) => {
+    const overrides = {
+      outputHashing: 'all',
+      extractCss: true,
+      optimization: true,
+      styles: [{ input: 'src/styles.css', lazy: true }],
+    };
+
+    runTargetSpec(host, browserTargetSpec, overrides, DefaultTimeout).pipe(
+      tap(() => {
+        expect(host.fileMatchExists('dist', /styles\.[0-9a-f]{20}\.js/)).toBeFalsy();
+        expect(host.fileMatchExists('dist', /styles\.[0-9a-f]{20}\.js.map/)).toBeFalsy();
+        expect(host.scopedSync().exists(normalize('dist/styles.css'))).toBe(true);
+        expect(host.scopedSync().exists(normalize('dist/styles.css.map'))).toBe(true);
+      }),
+    ).toPromise().then(done, done.fail);
+  });
 });