8000 Karma builder not able to use text loader · Issue #30315 · angular/angular-cli · GitHub
[go: up one dir, main page]
Skip to content

Karma builder not able to use text loader #30315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
1 task
skyZcoding opened this issue May 15, 2025 · 1 comment
Closed
1 task

Karma builder not able to use text loader #30315

skyZcoding opened this issue May 15, 2025 · 1 comment

Comments

@skyZcoding
Copy link

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
@alan-agius4
Copy link
Collaborator

This is expected with the old builder. You can specify the loader option when using @angular/build:karma

@alan-agius4 alan-agius4 closed this as not planned Won't fix, can't repro, duplicate, stale May 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@alan-agius4 @skyZcoding
0