Client-side GET of .scss returns HMR-wrapped JS instead of raw CSS text in Angular CLI20.1.3 #30792
Description
Command
build
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
<20.1.3
Description
Reading .scss via HttpClient.get(..., responseType: 'text') with Accept: text/html now returns Vite/HMR-injected JavaScript instead of the actual Sass source. This is a breaking change from Angular 20.1.2 behavior and prevents scenarios where raw .scss is needed.
Minimal Reproduction
- Add a file src/styles.scss
body {
margin: 0;
}
- Use this code in any service/component:
import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';
import { map, Observable } from 'rxjs';
export const getAsset = (path: string): Observable<string> =>
inject(HttpClient)
.get(path, {
responseType: 'text',
headers: {
Accept: 'text/html'
}
})
.pipe(map((r) => r.trim()));
- Call
getAsset('src/styles.scss').subscribe(console.log)
Exception or Error
The logged content is not SCSS. It looks like:
initialized import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("...
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
import.meta.hot.prune(() => __vite__removeStyle(__vite__id))
Your Environment
ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 20.1.3
Node: 22.14.0
Package Manager: yarn 4.9.2
OS: darwin arm64
Angular: 20.1.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.2001.3
@angular-devkit/build-angular 20.1.3
@angular-devkit/core 20.1.3
@angular-devkit/schematics 20.1.3
@schematics/angular 20.1.3
ng-packagr 20.0.0
rxjs 7.8.2
typescript 5.8.2
zone.js 0.15.0
Anything else relevant?
Before version 20.1.3 the content was:
body {
margin: 0;
}
The change that brought the error: #30781 - the changes in method createAngularAssetsMiddleware