fix(@angular-devkit/build-angular): cache stylesheet load errors with application builder

When using the `application` and/or `browser-esbuild` builders, stylesheets
that generate errors will now have the errors cached between rebuilds during
watch mode (include `ng serve`). This not only avoids reprocessing files that
contain errors and that have not changed but also provides file watching information
from the cache to ensure the error-causing files are properly invalidated.

Author: clydin

packages/angular_devkit/build_angular/src/tools/esbuild/load-result-cache.ts

@@ -30,8 +30,8 @@ export function createCachedLoad(
     if (result === undefined) {
       result = await callback(args);
 
-      // Do not cache null or undefined or results with errors
-      if (result && result.errors === undefined) {
+      // Do not cache null or undefined
+      if (result) {
         await cache.put(loadCacheKey, result);
       }
     }

packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/less-language.ts

@@ -115,6 +115,8 @@ async function compileString(
     };
   } catch (error) {
     if (isLessException(error)) {
+      const location = convertExceptionLocation(error);
+
       // Retry with a warning for less files requiring the deprecated inline JavaScript option
       if (error.message.includes('Inline JavaScript is not enabled.')) {
         const withJsResult = await compileString(
@@ -127,7 +129,7 @@ async function compileString(
         withJsResult.warnings = [
           {
             text: 'Deprecated inline execution of JavaScript has been enabled ("javascriptEnabled")',
-            location: convertExceptionLocation(error),
+            location,
             notes: [
               {
                 location: null,
@@ -148,10 +150,11 @@ async function compileString(
         errors: [
           {
             text: error.message,
-            location: convertExceptionLocation(error),
+            location,
           },
         ],
         loader: 'css',
+        watchFiles: location.file ? [filename, location.file] : [filename],
       };
     }
 

packages/angular_devkit/build_angular/src/tools/esbuild/stylesheets/sass-language.ts

@@ -176,7 +176,7 @@ async function compileString(
     };
   } catch (error) {
     if (isSassException(error)) {
-      const file = error.span.url ? fileURLToPath(error.span.url) : undefined;
+      const fileWithError = error.span.url ? fileURLToPath(error.span.url) : undefined;
 
       return {
         loader: 'css',
@@ -186,7 +186,7 @@ async function compileString(
           },
         ],
         warnings,
-        watchFiles: file ? [file] : undefined,
+        watchFiles: fileWithError ? [filePath, fileWithError] : [filePath],
       };
     }