fix(@angular-devkit/build-angular): ensure latest inline stylesheet data is used during rebuilds

Fixes: angular#20904

Author: clydin

src/ivy/host.ts

@@ -58,7 +58,12 @@ export function augmentHostWithResources(
     }
 
     if (options.inlineStyleMimeType) {
-      const content = await resourceLoader.process(data, options.inlineStyleMimeType);
+      const content = await resourceLoader.process(
+        data,
+        options.inlineStyleMimeType,
+        context.type,
+        context.containingFile,
+      );
 
       return { content };
     }

src/resource_loader.ts

@@ -98,13 +98,16 @@ export class WebpackResourceLoader {
     filePath?: string,
     data?: string,
     mimeType?: string,
+    resourceType?: 'style' | 'template',
+    hash?: string,
+    containingFile?: string,
   ): Promise<CompilationOutput> {
     if (!this._parentCompilation) {
       throw new Error('WebpackResourceLoader cannot be used without parentCompilation');
     }
 
     // Create a special URL for reading the resource from memory
-    const entry = data ? 'angular-resource://' : filePath;
+    const entry = data ? `angular-resource:${resourceType},${hash}` : filePath;
     if (!entry) {
       throw new Error(`"filePath" or "data" must be specified.`);
     }
@@ -116,7 +119,11 @@ export class WebpackResourceLoader {
       );
     }
 
-    const outputFilePath = filePath || `angular-resource-output-${this.outputPathCounter++}.css`;
+    const outputFilePath =
+      filePath ||
+      `${containingFile}-angular-inline--${this.outputPathCounter++}.${
+        resourceType === 'template' ? 'html' : 'css'
+      }`;
     const outputOptions = {
       filename: outputFilePath,
       library: {
@@ -215,7 +222,14 @@ export class WebpackResourceLoader {
         if (parent) {
           parent.children = parent.children.filter((child) => child !== childCompilation);
 
-          parent.fileDependencies.addAll(childCompilation.fileDependencies);
+          for (const fileDependency of childCompilation.fileDependencies) {
+            if (data && containingFile && fileDependency.endsWith(entry)) {
+              // use containing file if the resource was inline
+              parent.fileDependencies.add(containingFile);
+            } else {
+              parent.fileDependencies.add(fileDependency);
+            }
+          }
           parent.contextDependencies.addAll(childCompilation.contextDependencies);
           parent.missingDependencies.addAll(childCompilation.missingDependencies);
           parent.buildDependencies.addAll(childCompilation.buildDependencies);
@@ -298,7 +312,12 @@ export class WebpackResourceLoader {
     return compilationResult.content;
   }
 
-  async process(data: string, mimeType: string): Promise<string> {
+  async process(
+    data: string,
+    mimeType: string,
+    resourceType: 'template' | 'style',
+    containingFile?: string,
+  ): Promise<string> {
     if (data.trim().length === 0) {
       return '';
     }
@@ -307,7 +326,14 @@ export class WebpackResourceLoader {
     let compilationResult = this.inlineCache?.get(cacheKey);
 
     if (compilationResult === undefined) {
-      compilationResult = await this._compile(undefined, data, mimeType);
+      compilationResult = await this._compile(
+        undefined,
+        data,
+        mimeType,
+        resourceType,
+        cacheKey,
+        containingFile,
+      );
 
       if (this.inlineCache && compilationResult.success) {
         this.inlineCache.set(cacheKey, compilationResult);