Feature request: loader option in new esbuild karma builder

[stefankoserkov]

Command

test

Description

The improved builder @angular-devkit/build-angular:karma which uses esbuild is missing the "loader" option. It would be really useful to have the option to require files in tests.

Describe the solution you'd like

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "builderMode": "application",
            **"loader": {
              ".html": "text"
            }**
          }
        }

Describe alternatives you've considered

No response

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[jkrems]

@stefankoserkov Would it be useful if that option would be used from what's already configured for the prod or dev builder? Or would there be cases where it should only apply to the test runner?

[stefankoserkov]

@jkrems I'd like it to be an option on the karma builder, to have better separation, but I'll take the other option as well.

If you are interested the case is that .html files will be required in tests to test something relating to iframes, which will not be used in prod/dev builds. But in our particular case I don't foresee side effects of this loader, if left in prod/dev build configs.

Thank you for the fast response!

[jkrems]

For a limited use in tests, you might also be able to use the import attribute syntax, e.g.:

import myTestHtml from './testdata/test.html' with { loader: 'text' };

If nothing else, this might be a workaround until we can more properly support loader in the Karma setup.

[stefankoserkov]

I like this workaround it's very cutting edge. However, for enterprise purposes I think it kind of deviates from the Angular path, I don't think we can afford to use module: esnext and declare .html files as modules. For now, I will try to gather votes, and stick to webpack.

Thank you for the suggestion, I learnt something new.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[jeandat]

Is it not strange to not support the same set of properties than in the build target? How are we supposed to migrate to the new karma builder if we cannot build the app? The new builder is useless for me. I have to revert back to webpack (only thing that forces me to still use webpack, can't wait to remove it). 😓😭

[jlchmura]

We also had to revert back to the old webpack-based karma builder. We can't use the new karma target without the loaders option.

[jeandat]

For the loader issue, i found a workaround but the new builder seems very unstable and crash on my part so i'm not going to use it anyway. Regarding loaders, you cannot configure a general rule but you can configure a rule on a case by case basis on the import directly:

// https://angular.dev/tools/cli/build-system-migration#import-attribute-loader-customization
// With loader syntax only necessary for unit tests since karma builder does not have yet a loader property.
// @ts-expect-error 
import notFoundImageUrl from 'imported-assets/not-found.svg' with { loader: 'file' };

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}