fix(@ngtools/webpack): correctly determine resource dependencies

Fix #16569

Author: filipesilva

packages/angular_devkit/build_angular/test/browser/rebuild_spec_large.ts

@@ -458,7 +458,7 @@ describe('Browser Builder rebuilds', () => {
               expect(content).toContain('CSS_REBUILD_STRING');
               // Change the component css import.
               host.appendToFile(
-                'src/app/app.component.css',
+                'src/app/imported-styles.css',
                 'CSS_DEP_REBUILD_STRING {color: #f00;}',
               );
               break;

packages/ngtools/webpack/src/angular_compiler_plugin.ts

@@ -1215,12 +1215,18 @@ export class AngularCompilerPlugin {
       })
       .filter(x => x) as string[];
 
-    let resourceImports: string[] = [], resourceDependencies: string[] = [];
+    let resourceImports: string[] = [];
+    const resourceDependencies: string[] = [];
     if (includeResources) {
       resourceImports = findResources(sourceFile)
         .map(resourcePath => resolve(dirname(resolvedFileName), normalize(resourcePath)));
-      resourceDependencies =
-        this.getResourceDependencies(this._compilerHost.denormalizePath(resolvedFileName));
+
+      for (const resource of resourceImports) {
+        for (const dep of this.getResourceDependencies(
+            this._compilerHost.denormalizePath(resource))) {
+          resourceDependencies.push(dep);
+        }
+      }
     }
 
     // These paths are meant to be used by the loader so we must denormalize them.
@@ -1233,7 +1239,7 @@ export class AngularCompilerPlugin {
     return [...uniqueDependencies];
   }
 
-  getResourceDependencies(fileName: string): string[] {
+  getResourceDependencies(fileName: string) {
     if (!this._resourceLoader) {
       return [];
     }

packages/ngtools/webpack/src/loader.ts

@@ -96,8 +96,9 @@ export function ngcLoader(this: loader.LoaderContext) {
       const ngStyleRe = /(?:\.shim)?\.ngstyle\.js$/;
       if (ngStyleRe.test(sourceFileName)) {
         const styleFile = sourceFileName.replace(ngStyleRe, '');
-        const styleDependencies = plugin.getResourceDependencies(styleFile);
-        styleDependencies.forEach(dep => this.addDependency(dep));
+        for (const dep of plugin.getResourceDependencies(styleFile)) {
+          this.addDependency(dep);
+        }
       }
 
       // Add type-only dependencies that should trigger a rebuild when they change.

packages/ngtools/webpack/src/resource_loader.ts

@@ -11,6 +11,7 @@
 import * as path from 'path';
 import * as vm from 'vm';
 import { RawSource } from 'webpack-sources';
+import { forwardSlashPath } from './utils';
 
 const NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin');
 const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
@@ -26,8 +27,8 @@ interface CompilationOutput {
 export class WebpackResourceLoader {
   private _parentCompilation: any;
   private _context: string;
-  private _fileDependencies = new Map<string, string[]>();
-  private _reverseDependencies = new Map<string, string[]>();
+  private _fileDependencies = new Map<string, Set<string>>();
+  private _reverseDependencies = new Map<string, Set<string>>();
   private _cachedSources = new Map<string, string>();
   private _cachedEvaluatedSources = new Map<string, RawSource>();
 
@@ -129,13 +130,14 @@ export class WebpackResourceLoader {
     });
 
     // Save the dependencies for this resource.
-    this._fileDependencies.set(filePath, childCompilation.fileDependencies);
+    this._fileDependencies.set(filePath, new Set(childCompilation.fileDependencies));
     for (const file of childCompilation.fileDependencies) {
-      const entry = this._reverseDependencies.get(file);
+      const resolvedFile = forwardSlashPath(file);
+      const entry = this._reverseDependencies.get(resolvedFile);
       if (entry) {
-        entry.push(filePath);
+        entry.add(filePath);
       } else {
-        this._reverseDependencies.set(file, [filePath]);
+        this._reverseDependencies.set(resolvedFile, new Set([filePath]));
       }
     }