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

Author: alan-agius4

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}));
     }
   }
 

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;

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);
+  });
 });