fix(@ngtools/webpack): gracefully show error when compiling broken co…

…mponent styles

Fixes angular#15240

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

@@ -63,4 +63,32 @@ describe('Browser Builder AOT', () => {
     expect(logs.join()).toContain('WARNING in Invalid selector');
     await run.stop();
   });
+
+  it('shows error when component stylesheet contains SCSS syntax error', async () => {
+    const overrides = {
+      aot: true,
+    };
+
+    host.replaceInFile(
+      'src/app/app.component.ts',
+      'app.component.css',
+      'app.component.scss',
+    );
+
+    host.writeMultipleFiles({
+      'src/app/app.component.scss': `
+        .foo {
+      `,
+    });
+
+    const logger = new logging.Logger('');
+    const logs: string[] = [];
+    logger.subscribe(e => logs.push(e.message));
+
+    const run = await architect.scheduleTarget(targetSpec, overrides, { logger });
+    const output = await run.result;
+    expect(output.success).toBe(false);
+    expect(logs.join()).toContain(`Expected "}".`);
+    await run.stop();
+  });
 });

packages/ngtools/webpack/src/resource_loader.ts

@@ -99,6 +99,12 @@ export class WebpackResourceLoader {
     // Compile and return a promise
     return new Promise((resolve, reject) => {
       childCompiler.compile((err: Error, childCompilation: any) => {
+        if (err) {
+          reject(err);
+
+          return;
+        }
+
         // Resolve / reject the promise
         const { warnings, errors } = childCompilation;
 
@@ -114,8 +120,6 @@ export class WebpackResourceLoader {
             .join('\n');
 
           reject(new Error('Child compilation failed:\n' + errorDetails));
-        } else if (err) {
-          reject(err);
         } else {
           Object.keys(childCompilation.assets).forEach(assetName => {
             // Add all new assets to the parent compilation, with the exception of