This "import" expression will not be bundled because the argument is not a string literal

Question

I just created NEW PROJECT using the Angular 19. And I have this error in the console. Anyone also encountered this message and able to find the solution? or is this normal?

CLI used:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 19.1.0
Node: 23.1.0 (Unsupported)
Package Manager: npm 10.9.2
OS: win32 x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1901.0
@angular-devkit/core         19.1.0
@angular-devkit/schematics   19.1.0
@angular/cli                 19.1.0
@schematics/angular          19.1.0

steps I did before encountering the message:

1. Project Creation:

ng new client

Which stylesheet format would you like to use? Sass (SCSS)

Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No

2. Angular.json - under the serve block I only added the verbose option

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "client:build:production"
            },
            "development": {
              "buildTarget": "client:build:development"
            }
          },
          "defaultConfiguration": "development",
          "options": {
            "verbose": true
          }
        },

Then running the angular application I got this message:

> [email protected] start
> ng serve

Component HMR has been enabled.
If you encounter application reload issues, you can manually reload the page to bypass HMR and/or disable this feature with the `--no-hmr` command line option.
Please consider reporting any issues you encounter here: https://github.com/angular/angular-cli/issues

| Building...
● [DEBUG] This "import" expression will not be bundled because the argument is not a string literal [unsupported-dynamic-import]

    src/app/app.component.ts:81:44:
      81 │ (() => { function AppComponent_HmrLoad(t) { import(/* @vite-ignore */
         ╵                                             ~~~~~~
Initial chunk files | Names         |  Raw size
polyfills.js        | polyfills     |  90.20 kB |
main.js             | main          |  23.10 kB |
styles.css          | styles        |  96 bytes |

                    | Initial total | 113.39 kB

Application bundle generation complete. [5.931 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

Solution or if the message is normal. Please be reminded that this is a NEWLY CREATED PROJECT. No additional package or dependencies. Only modified the angular.json file

Answer 1

The included link might help, for the time being I've just added --no-hmr to my ng serve.

ng serve --no-hmr

3. Dynamic Import Warning: The specific warning about dynamic import not being bundled is due to Angular CLI’s build process identifying a non-static import. This is primarily a development-time warning, indicating that such imports will not be likely included in the optimized production bundle.

Source: Understanding Angular 19: Common Errors and Solutions

Answer 2

Looking on the Angular GitHub #59602, numerous issues related to HMR seem to be fixed in 19.1.3 (framework) and 19.1.4 (cli)

Can you update to those and see if the issue is fixed?