@angular-devkit/build-angular:dev-server | transforms js file loaded via assets-configuration

[basti-n]

Command

serve

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

17.3.11

Description

Background:
I dynamically load prebuild webcomponents (separate project / pkg using @angular/elements) in an Angular 19 Application.
These webcomponents are defined in assets-Configuration pointing to the respective package in node_modules.

Problem
When locally starting the Angular 19 Application (build-angular:dev-server), these dynamically loaded javascript assets are being transformed (by Vite I suppose) and hence an error occurs:

main.js Uncaught SyntaxError: Cannot use import statement outside a module

ℹ All non Dev-Server related cases work flawlessly.
ℹ With Angular 17 the problem did not occur

The transformation, among other things, adds import statements (for some of the applications chunks).

serve config

    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      "options": {
        "buildTarget": "client:build",
        "prebundle": false
      },
     ...
    },

and here the asset config from the build options.
In node_modules/@demo-wc/some-webcomponent contains the js-file.

        "assets": [
          {
            "glob": "**/*",
            "input": "node_modules/@demo-wc/some-webcomponent",
            "output": "/assets/some-webcomponent"
          },
         ...
        ],

Is this some regression, or is there any way to disable the transformation to the js files in node_modules when locally served via dev-server?

Minimal Reproduction

serve config

    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      "options": {
        "buildTarget": "client:build",
        "prebundle": false
      },
     ...
    },

    "build": {
      "executor": "@angular-devkit/build-angular:application",
      "options": {
        "outputPath": "dist/apps/client",
        "index": "apps/client/src/index.html",
        "browser": "apps/client/src/main.ts",
        "tsConfig": "apps/client/tsconfig.app.json",
        "polyfills": [
          "apps/client/src/polyfills.ts"
        ],
        "inlineStyleLanguage": "scss",
        "stylePreprocessorOptions": {
          "sass": {
            "silenceDeprecations": ["mixed-decls", "color-functions", "global-builtin", "import"]
          },
          "includePaths": [
            "libs/shared/ui/src/lib/styles"
          ]
        },
        "assets": [
          {
            "glob": "**/*",
            "input": "node_modules/@demo-wc/some-webcomponent",
            "output": "/assets/some-webcomponent"
          },
        ...
        ],
        ...
        "optimization": {
          "scripts": true,
          "styles": true,
          "fonts": true
        }
      },

npm start script

    "start": "npm run start-client",

Program runs fine until js-File from node_modules is dynamically loaded.

Exception or Error

Uncaught SyntaxError: Cannot use import statement outside a module

Your Environment

`"@angular/cli": "19.0.6",`

Anything else relevant?

No response

[alan-agius4]

Can you please check if this is still a problem in 19.1.0 which is currently in prerelease?

ng update @angular/cli@next

If the problem persists can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[basti-n]

yes, problem still occurs with version 19.1.
For CSS Files, the dev server even returns text/javascript instead of text/css

import {
    createHotContext as __vite__createHotContext }

...

from "/@vite/client";import.meta.hot = __vite__createHotContext( ...

....

from "/@vite/client" const __vite__id = 

....

is there any possible setting that would cause this issue?

[alan-agius4]

This issue may be related to how these files are being utilized. Unfortunately, without a minimal runnable reproducible, further investigation isn't possible.

[basti-n]

Update
I was able to pin the problem down to version 19.06.
Seems to be solved with 19.07.

In case you need a repro repo, let me know

[alan-agius4]

A reproduction would certainly speed up our investigation.

[basti-n]

Reproduction Repo: https://github.com/basti-n/angular-esbuild-dyn/tree/angular-cli-dev-server-issue
Branch: angular-cli-dev-server-issue

Repro Step

1. Checkout Repo
2. Run npm install
3. Run npm run start
4. Open http://localhost:4202/ in Browser of choice
5. Click on 'Load CSS Asset' Button
6. Go to Network Tab (and view request for styles.css, and see that instead of css js - Content-Type text/javascript- is returned instread of text/css)

[alan-agius4]

Hi @basti-n, thanks for the reproduction. I had a look and it seems that the issue is no reproducible with 19.1. (npm i @angular-devkit/[email protected] --save-dev)

$ curl http://localhost:4202/assets/styles.css
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.some-more-style {
  margin-top: 20px;
  border: 1px solid black;
}

[alan-agius4]

Closing as per above.