fix(@angular-devkit/build-angular): ensure empty component styles com…

…pile with esbuild

Previously when using the esbuild-based browser application builder, an empty inline
component style (`styles: ['']`) would cause the build to fail. This was due to a
bad assertion condition that has now been corrected.

packages/angular_devkit/build_angular/src/builders/browser-esbuild/css-plugin.ts

@@ -80,7 +80,10 @@ export function createCssPlugin(options: CssPluginOptions): Plugin {
       // Add a load callback to support inline Component styles
       build.onLoad({ filter: /^css;/, namespace: 'angular:styles/component' }, async (args) => {
         const data = options.inlineComponentData?.[args.path];
-        assert(data, `component style name should always be found [${args.path}]`);
+        assert(
+          typeof data === 'string',
+          `component style name should always be found [${args.path}]`,
+        );
 
         const [, , filePath] = args.path.split(';', 3);
 

packages/angular_devkit/build_angular/src/builders/browser-esbuild/less-plugin.ts

@@ -40,7 +40,10 @@ export function createLessPlugin(options: LessPluginOptions): Plugin {
       // Add a load callback to support inline Component styles
       build.onLoad({ filter: /^less;/, namespace: 'angular:styles/component' }, async (args) => {
         const data = options.inlineComponentData?.[args.path];
-        assert(data, `component style name should always be found [${args.path}]`);
+        assert(
+          typeof data === 'string',
+          `component style name should always be found [${args.path}]`,
+        );
 
         const [, , filePath] = args.path.split(';', 3);
 

packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts

@@ -64,7 +64,10 @@ export function createSassPlugin(options: SassPluginOptions): Plugin {
 
       build.onLoad({ filter: /^s[ac]ss;/, namespace: 'angular:styles/component' }, async (args) => {
         const data = options.inlineComponentData?.[args.path];
-        assert(data, `component style name should always be found [${args.path}]`);
+        assert(
+          typeof data === 'string',
+          `component style name should always be found [${args.path}]`,
+        );
 
         const [language, , filePath] = args.path.split(';', 3);
         const syntax = language === 'sass' ? 'indented' : 'scss';

packages/angular_devkit/build_angular/src/builders/browser-esbuild/tests/behavior/component-stylesheets_spec.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { buildEsbuildBrowser } from '../../index';
+import { BASE_OPTIONS, BROWSER_BUILDER_INFO, describeBuilder } from '../setup';
+
+describeBuilder(buildEsbuildBrowser, BROWSER_BUILDER_INFO, (harness) => {
+  describe('Behavior: "Component Stylesheets"', () => {
+    it('should successfuly compile with an empty inline style', async () => {
+      await harness.modifyFile('src/app/app.component.ts', (content) => {
+        return content.replace('styleUrls', 'styles').replace('./app.component.css', '');
+      });
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+    });
+  });
+});