diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/css-plugin.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/css-plugin.ts index 2e77fca7a5c2..ad3d0568c8f9 100644 --- a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/css-plugin.ts +++ b/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); diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/less-plugin.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/less-plugin.ts index 0bfaca61e075..4071bb07df5c 100644 --- a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/less-plugin.ts +++ b/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); diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts index 7c3ea8fb5bd4..27f2d1055d41 100644 --- a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/sass-plugin.ts +++ b/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'; diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/tests/behavior/component-stylesheets_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/tests/behavior/component-stylesheets_spec.ts new file mode 100644 index 000000000000..4729deaf3332 --- /dev/null +++ b/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(); + }); + }); +});