Description
Command
test
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
No response
Description
Description
When attempting to import .svg files in unit tests by configuring an esbuild-style loader under the test target in angular.json, the CLI rejects the configuration with a JSON‐schema validation error (“Property not allowed”). As a result, importing SVGs in specs fails with:
No loader is configured for ".svg" files
Important: with the normal build it works perfectly fine.
Expected Behavior:
The builderMode: "application" and accompanying loader map should be accepted by the test builder’s schema, enabling esbuild to inline or file‐emit .svg imports exactly as in the application build.
Specs importing SVGs should compile under the esbuild‐powered pipeline without further WebPack tweaks.
Docs to the implementation example
Docs to the test build
Actual Behavior:
The CLI fails schema validation on angular.json with an error like:
Schema validation failed with the following errors:
Data path “/projects/phlu-webapp/architect/test/options” should NOT have additional properties(loader).
Tests continue to use the WebPack‐based Karma builder (which knows nothing about esbuild loaders), so importing an SVG in a spec throws:
No loader is configured for ".svg" files
Minimal Reproduction
Component to load the svg
svg-loader.component.ts
import { Component, Input, OnInit } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
@Component({
selector: "app-svg-loader",
standalone: true,
imports: [],
templateUrl: "./svg-loader.component.html",
styleUrls: ["./svg-loader.component.css"],
})
export class SvgLoaderComponent implements OnInit {
@Input() iconPath = "";
@Input() iconClass = "w-16 h-16";
icon: SafeHtml = "";
constructor(private sanitizer: DomSanitizer) {}
async ngOnInit() {
const svgModule = await import(
"../../../../../public/icons/" + this.iconPath
);
const svgContent = svgModule.default;
this.icon = this.sanitizer.bypassSecurityTrustHtml(svgContent);
}
}
svg-loader.component.html
<div [innerHTML]="icon" [class]="iconClass">
</div>
Angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"phlu-webapp": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/phlu-webapp",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": ["zone.js"],
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": ["src/styles.css"],
"scripts": [],
"loader" : {
".svg": "text"
}
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kB",
"maximumError": "8kB"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.development.ts"
}
]
},
"local": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.local.ts"
}
]
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "phlu-webapp:build:production"
},
"development": {
"buildTarget": "phlu-webapp:build:development"
},
"local": {
"buildTarget": "phlu-webapp:build:local"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": ["zone.js", "zone.js/testing"],
"tsConfig": "tsconfig.spec.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"builderMode": "application",
"styles": ["src/styles.css"],
"scripts": [],
"karmaConfig": "karma.conf.js"
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
}
},
"cli": {
"analytics": "3c61ed03-0877-4276-af6f-74e1ea2852da",
"schematicCollections": ["angular-eslint"]
}
}
Commands
ng test --watch=false --no-progress --browsers=ChromeHeadlessCI --code-coverage
Exception or Error
No loader is configured for ".svg" files: public/icons/menu.svg
src/app/shared/components/svg-loader/svg-loader.component.ts:269:60:
269 │ ...+, await import('../../../../../public/icons/' + this.iconPath));
Your Environment
Angular CLI: 19.2.12
Node: 22.13.1
Package Manager: yarn 1.22.22
OS: win32 x64
Angular: 19.2.10
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1902.12
@angular-devkit/build-angular 19.2.12
@angular-devkit/core 19.2.12
@angular-devkit/schematics 19.2.12
@angular/cli 19.2.12
@schematics/angular 19.2.12
rxjs 7.8.2
typescript 5.8.3
zone.js 0.15.0
Anything else relevant?
No response