Angular CLI @angular-devkit/build-angular:application not working with dynamic imports

[kukjevov]

Command

build

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

When trying to use dynamic import like this

const name = 'test';
const component = await import(`../${name}`);

It is not working and build returns error
No loader is configured for ".html"

Minimal Reproduction

git checkout https://github.com/kukjevov/ng-universal-demo
cd ng-universal-demo
git checkout import/2.0
npm install
npm run build

Exception or Error

No loader is configured for ".html" files: app/pages/+default/test/test.component.html

    app/pages/+default/home/home.component.ts:12:39:
      12 │         const component = await import(`../${name}`);

Your Environment

Libs
- @angular/core version: 17.3.6
- @angular-devkit/build-angular version: 17.3.6
- @angular-builders/custom-esbuild version: 17.1.2

For Tooling issues:
- Node version: 20.13.0
- Platform:   Windows

Anything else relevant?

No response

[alan-agius4]

You need to configure the loader option, Example:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "loader": {
        ".html": "text"
      },
    },
  },
}

Valid loader types include text, binary, file, and empty. You can read more about loaders at the esbuild documentation.

[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.}