Import attributes support for karma builder

[LeonEck]

Command

test

Description

I am excited about the new loader import attribute option enabled by https://github.com/angular/angular-cli/commit/24aaf1e37f49735ce97fe72fced3d53b51d6b631

Unfortunately, the karma builder can't deal with the syntax yet and produces an error like this:

> ng test --no-watch --browsers=ChromeHeadless

- Generating browser application bundles (phase: setup)...
✔ Browser application bundle generation complete.

./src/app/app.component.ts - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
SyntaxError: /home/runner/work/import-attribute/import-attribute/src/app/app.component.ts: Support for the experimental syntax 'importAttributes' isn't currently enabled (7:54):

   5 | import { RouterOutlet } from '@angular/router';
   6 | // @ts-expect-error TypeScript cannot provide types based on attributes yet
>  7 | import configFileContent from './app.config.ts' with { loader: 'text' };
     |                                                      ^
   8 | let AppComponent = class AppComponent {
   9 |     title = 'import-attribute';
  10 |     constructor() {

Add @babel/plugin-syntax-import-attributes (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-import-attributes) to the 'plugins' section of your Babel config to enable parsing.

If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
    npx cross-env BABEL_SHOW_CONFIG_FOR=/home/runner/work/import-attribute/import-attribute/src/app/app.component.ts <your build command>
See https://babeljs.io/docs/configuration#print-effective-configs for more info.

I created a minimal reproduction here: https://github.com/LeonEck/import-attribute Failing Test: https://github.com/LeonEck/import-attribute/actions/runs/10165282404/job/28112719062

Are there any plans to extend the support to the karma builder?

Describe the solution you'd like

No response

Describe alternatives you've considered

No response

[HitkoDev]

Right now it's pretty much impossible to run tests if you use any new features from @angular-devkit/build-angular:application, because Karma and Jest still use Webpack.

[jkrems]

Yeah, it's an unfortunate intermediate state. The v19 releases contain a "builderMode" option for Karma that allows it to use the application builder. But thats not super helpful for "real" apps right now.