fix(@ngtools/webpack): allow generated assets of Angular component resources

The asset caching for Angular component resources previously required that all assets had an originating file. However, some Webpack plugins may generate assets that do not originate from on-disk files and are instead synthetic. These type of assets are now supported by generating a cache key based on the output name of the asset. These assets will persist within the cache due to the lack of knowledge on the dependencies of these assets which results in the inability to invalidate the assets. Updated assets of the same output name will, however, replace older versions of the asset on rebuilds.

Fixes: angular#21290

Author: clydin

packages/ngtools/webpack/src/resource_loader.ts

@@ -274,12 +274,15 @@ export class WebpackResourceLoader {
 
           parent.warnings.push(...childCompilation.warnings);
           parent.errors.push(...childCompilation.errors);
-          for (const { info, name, source } of childCompilation.getAssets()) {
-            if (info.sourceFilename === undefined) {
-              throw new Error(`'${name}' asset info 'sourceFilename' is 'undefined'.`);
-            }
 
-            this.assetCache?.set(info.sourceFilename, { info, name, source });
+          if (this.assetCache) {
+            for (const { info, name, source } of childCompilation.getAssets()) {
+              // Use the originating file as the cache key if present
+              // Otherwise, generate a cache key based on the generated name
+              const cacheKey = info.sourceFilename ?? `!![GENERATED]:${name}`;
+
+              this.assetCache.set(cacheKey, { info, name, source });
+            }
           }
         }