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.