bug: `Angular compilation initialization failed` thrown when using "styles: \`...\`"

[michael-small]

Background

(links to repro at end)

Angular projects can define styles directly inside the @Component decorator like so: https://angular.dev/guide/components/styling

@Component({
  ...
  styles: ` img { border-radius: 50%; } `,
})
export class ProfilePhoto { }

However...

The Bug

The following error is thrown when serving an Angular app with the latest starter with such styles declaration (that are not empty)

~/projects/stackblitz-starters-8q9thuwb
❯ npm install && npm start

added 462 packages in 3s

81 packages are looking for funding
  run `npm fund` for details

> start
> ng serve

Prebundling has been configured but will not be used because caching has been disabled.
Prebundling has been configured but will not be used because caching has been disabled.
Application bundle generation failed. [2.989 seconds]

✘ [ERROR] Angular compilation initialization failed. [plugin angular-compiler]

  Error: Digest method not supported
      at new _0x1871ea (https://stackblitzstarters8q9thuwb-22r5.w-credentialless-staticblitz.com/blitz.c8c182a3.js:40:835644)
      at new Hash (https://stackblitzstarters8q9thuwb-22r5.w-credentialless-staticblitz.com/builtins.ddb8d84d.js:70:945)
      at createHash (https://stackblitzstarters8q9thuwb-22r5.w-credentialless-staticblitz.com/builtins.ddb8d84d.js:24:2531)
      at Object.transformStylesheet (file:///home/projects/stackblitz-starters-8q9thuwb/node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js#cjs:160:64)
      at _0x663055.eval (file:///home/projects/stackblitz-starters-8q9thuwb/node_modules/@angular/build/src/tools/angular/compilation/parallel-compilation.js#cjs:42:18)
      at [nodejs.internal.kHybridDispatch] (https://stackblitzstarters8q9thuwb-22r5.w-credentialless-staticblitz.com/builtins.ddb8d84d.js:102:8637)
      at t.emitMessage (https://stackblitzstarters8q9thuwb-22r5.w-credentialless-staticblitz.com/builtins.ddb8d84d.js:169:364)
      at https://stackblitzstarters8q9thuwb-22r5.w-credentialless-staticblitz.com/blitz.c8c182a3.js:40:879998
      at https://stackblitzstarters8q9thuwb-22r5.w-credentialless-staticblitz.com/blitz.c8c182a3.js:40:199058
      at _0x2d0d9d (https://stackblitzstarters8q9thuwb-22r5.w-credentialless-staticblitz.com/blitz.c8c182a3.js:40:199172)


Watch mode enabled. Watching for file changes...

That said, when I download the project and run it locally (link to repo in the last section), it works as intended.

Other notes

• This isn't an issue when it is just an empty "styles: ``"
• I have not had issues with these in-component styles in Stackblitz until this issue in the last day or two
  • I don't have good examples of working ones since I always fork my own starter with a lot more dependencies, but here is one with the same type of styles that just works: https://stackblitz.com/edit/bfjmf2-k1gcxd?file=src%2Fmain.ts. However, I think I have had this upgraded since v18 so it probably is configured different out of the box before I made major changes anyways.
• edit: system info
  • Windows 11
  • Happens on the latest versions of my 3 browsers
    • Chrome (Version 131.0.6778.205 (Official Build) (64-bit))
    • Firefox (133.0.3 (64-bit))
    • Edge (Version 131.0.2903.112 (Official build) (64-bit))

Links to Reproductions

Broken Stackblitz project: https://stackblitz.com/edit/stackblitz-starters-8q9thuwb?file=src%2Fmain.ts

Downloaded project repo, which can be ran with npm install && npm start: https://github.com/michael-small/stackblitz-angular-styles-error

[michael-small]

I may have found a solution:

https://stackblitz.com/edit/stackblitz-starters-thdpjkfi?file=src%2Fmain.ts

It looks like they are missing "@angular-devkit/build-angular": "^19.0.0", in the "devDependencies" in package.json

[michael-small]

Update 2

I see that that was removed in the v19 PR by just changing it to "@angular/build": "^19.0.0", with serve and build configs in the angular.json being "builder": "@angular/build:application",.

However, I am a bit confused.

When I look in the angular.dev docs, I mostly see mentions of the @angular-devkit/build-angular being the default and most commonly referenced. "While any builder can be used here, the most common (and default) builder is @angular-devkit/build-angular:dev-server.".

As for The @angular/build is mostly only used in the docs a few times without comment about it, and for the most part in angular.json in the docs' config files themselves: https://github.com/search?q=repo%3Aangular%2Fangular%20%40angular%2Fbuild%3Aapplication&type=code

[michael-small]

@JeevanMahesha, since you did the Angular v19 PR, thoughts?

[JeevanMahesha]

@michael-small Thank you for reporting this issue. it's fixed in this PR #50,

[michael-small]

Thank you!

[michael-small]

Thanks: #53