Angular 18 not working with SCSS defined

[kai1992cool]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

If I add a single line of scss in the file, angular thows the below errors!

Initial chunk files | Names         |  Raw size
polyfills.js        | polyfills     |  88.10 kB | 
styles.css          | styles        |  70.60 kB | 
main.js             | main          |  22.73 kB | 

                    | Initial total | 181.43 kB

Application bundle generation complete. [5.259 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
Application bundle generation failed. [1.385 seconds]

✘ [ERROR] Unable to deserialize cloned data. [plugin angular-sass]

  This error came from the "onLoad" callback registered here:

    node_modules/@angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:152:22:
      152 │                 build.onLoad({ filter: language.fileFilter }, (0,...
          ╵                       ~~~~~~

    at setup (/home/projects/stackblitz-starters-7slw51/test/node_modules/@angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js:152:23)
    at handlePlugins (/home/projects/stackblitz-starters-7slw51/test/node_modules/esbuild/lib/main.js:1138:21)
    at buildOrContextImpl (/home/projects/stackblitz-starters-7slw51/test/node_modules/esbuild/lib/main.js:863:5)
    at Object.buildOrContext (/home/projects/stackblitz-starters-7slw51/test/node_modules/esbuild/lib/main.js:689:5)
    at eval (/home/projects/stackblitz-starters-7slw51/test/node_modules/esbuild/lib/main.js:1828:68)
    at Object.context (/home/projects/stackblitz-starters-7slw51/test/node_modules/esbuild/lib/main.js:1828:27)
    at context (/home/projects/stackblitz-starters-7slw51/test/node_modules/esbuild/lib/main.js:1670:58)
    at #performBundle (/home/projects/stackblitz-starters-7slw51/test/node_modules/@angular/build/src/tools/esbuild/bundler-context.js:158:68)

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-7slw51?description=Starter%20project%20for%20Node.js,%20a%20JavaScript%20runtime%20built%20on%20Chrome%27s%20V8%20JavaScript%20engine&file=test%2Fangular.json,test%2Fsrc%2Fapp%2Fapp.component.scss&title=node.new%20Starter

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

No response

Anything else?

No response

[alan-agius4]

I am only able to replicate this issue with stackblitz as locally the error is shown correctly.

$ ng b 
Application bundle generation failed. [3.145 seconds]

✘ [ERROR] expected "}".
  ╷
2 │   color: red;!
  │              ^
  ╵
  src/app/app.component.scss 2:14  root stylesheet [plugin angular-sass]

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}