angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.77k stars 11.97k forks source link

Feature request: loader option in new esbuild karma builder #28809

Open stefankoserkov opened 1 day ago

stefankoserkov commented 1 day ago

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[bot] commented 1 day ago

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 commented 1 day ago

@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 commented 1 day ago

@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 commented 1 day ago

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 commented 13 hours ago

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.