adev(bug): "Learn Angular in the Browser" breaks with styles #28925
Description
Describe the problem that you experienced
When running an embedded editor + preview in the docs, styles with seemingly any content besides an empty string in the @Component metadata break the preview, with the error "Angular compilation initialization failed." and stacktrace below.
Enter the URL of the topic with the problem
https://angular.dev/tutorials/learn-angular/1-components-in-angular
Describe what you were looking for in the documentation
In browser "Learn Angular" > (any subsection, but this is apparent in the second step, "Components in Angular")
@Component({
selector: 'app-root',
template: `
Hello
`,
styles: `
:host {
color: blue;
}
`,
})
export class AppComponent {}styles: `` seems fine
Describe the actions that led you to experience the problem
Loading the provided code of not just the URL of the problem, but any Learn Angular page with an embedded preview where the built in code editor includes styles (edit: with any content) in the @Component metadata.
Describe what you want to experience that would fix the problem
N/A
Add a screenshot if that helps illustrate the problem
N/A
If this problem caused an exception or error, please paste it here
Exception in the preview window in either Chrome or Firefox: Angular compilation initialization failed.
Stacktraces in integrated Console:
Chrome
> NG_BUILD_PARALLEL_TS=0 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. [3.310 seconds]
✘ [ERROR] Angular compilation initialization failed. [plugin angular-compiler]
Error: Digest method not supported
at new _0xf01bc2 (https://so2fqtogc510j58w5ahdcnak4woelj-3g25.w-corp-staticblitz.com/blitz.d3acb9e1.js:40:830459)
at new Hash (https://so2fqtogc510j58w5ahdcnak4woelj-3g25.w-corp-staticblitz.com/builtins.ddb8d84d.js:70:945)
at createHash (https://so2fqtogc510j58w5ahdcnak4woelj-3g25.w-corp-staticblitz.com/builtins.ddb8d84d.js:24:2531)
at Object.transformStylesheet (file:///home/angular/node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js#cjs:160:64)
at host.transformResource (file:///home/angular/node_modules/@angular/build/src/tools/angular/angular-host.js#cjs:116:42)
at AdapterResourceLoader.preprocessInline (file:///home/angular/node_modules/@angular/compiler-cli/bundles/chunk-WLQBAON6.js:2414:48)
at eval (file:///home/angular/node_modules/@angular/compiler-cli/bundles/chunk-OM3GHCE5.js:14014:81)
at Array.map (<anonymous>)
at eval (file:///home/angular/node_modules/@angular/compiler-cli/bundles/chunk-OM3GHCE5.js:14014:46)
at https://so2fqtogc510j58w5ahdcnak4woelj-3g25.w-corp-staticblitz.com/blitz.d3acb9e1.js:40:22706
Firefox
> [email protected] start
> NG_BUILD_PARALLEL_TS=0 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. [3.954 seconds]
✘ [ERROR] Angular compilation initialization failed. [plugin angular-compiler]
_0xf01bc2@https://so2fqtogc510j58w5ahdcnak4woelj-3g25.w-corp-staticblitz.com/blitz.d3acb9e1.js:40:830459
Hash@https://so2fqtogc510j58w5ahdcnak4woelj-3g25.w-corp-staticblitz.com/builtins.ddb8d84d.js:70:945
createHash@https://so2fqtogc510j58w5ahdcnak4woelj-3g25.w-corp-staticblitz.com/builtins.ddb8d84d.js:24:2531
transformStylesheet@file:///home/angular/node_modules/@angular/build/src/tools/esbuild/angular/compiler-plugin.js#cjs:160:64
createAngularCompilerHost/host.transformResource@file:///home/angular/node_modules/@angular/build/src/tools/angular/angular-host.js#cjs:116:42
preprocessInline@file:///home/angular/node_modules/@angular/compiler-cli/bundles/chunk-WLQBAON6.js:2414:48
preanalyze/</styles<@file:///home/angular/node_modules/@angular/compiler-cli/bundles/chunk-OM3GHCE5.js:14014:81
preanalyze/<@file:///home/angular/node_modules/@angular/compiler-cli/bundles/chunk-OM3GHCE5.js:14014:46
then/<@https://so2fqtogc510j58w5ahdcnak4woelj-3g25.w-corp-staticblitz.com/blitz.d3acb9e1.js:40:22695
If the problem is browser-specific, please specify the device, OS, browser, and version
OS/Device
Windows 11 Home
Browser(s):
Chrome
Version 131.0.6778.86 (Official Build) (64-bit)
Firefox
132.0.2 (64-bit)
Provide any additional information here in as much as detail as you can
N/A