Client-side GET of `.scss` returns HMR-wrapped JS instead of raw CSS text in Angular CLI20.1.3

[droshev]

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

1. Add a file src/styles.scss

body {
  margin: 0;
}

2. 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()));

3. 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