Vite pre-transform error on ng serve depending on the first route loaded in 19.0.0.next-2

[Exac]

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

19.0.0-next.1

Description

When you run ng serve in 19.0.0-next.2, and then open http://localhost:4200/bar/foo in the browser, you will get an error in the console:

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
11:21:13 AM [vite] Pre-transform error: Failed to load url /bar/polyfills.js (resolved id: /bar/polyfills.js). Does the file exist?
11:21:13 AM [vite] Pre-transform error: Failed to load url /bar/main.js (resolved id: /bar/main.js). Does the file exist?

If you close the browser window, restart the dev server, and load http://localhost:4200/bar or http://localhost:4200/ in the browser, there is no error in the console.

This behavior seems to appear in 19.0.0-next-2 to 19.0.0-next-5, and doesn't happen in 19.0.0-next-1.

Minimal Reproduction

I uploaded a repo with the problem here: https://github.com/Exac/ng-19-0-0-next-5-vite-pre-transform-error

# Don't choose SSR because the type definitions for CommonEngine seem broken in this version
npx @angular/[email protected] new check-for-pre-transform-error-19.0.0-next.2 --ssr=false
cd check-for-pre-transform-error-19.0.0-next.2
ng g c foo
ng g c bar

Replace routes with:

import {FooComponent} from "./foo/foo.component";

export const routes: Routes = [
  {
    path: 'bar/:foo',
    component: FooComponent,
  },
  {
    path: 'bar',
    loadComponent: () => import('./bar/bar.component').then(m => m.BarComponent),
  },
  {
    path: '**',
    redirectTo: 'bar'
  }
];

Then run the dev server and open http://localhost/bar/foo:

$ npx concurrently "npx wait-on tcp:4200 && curl http://localhost:4200/bar/foo" "npm run start"
[1] 11:53:58 AM [vite] Pre-transform error: Failed to load url /bar/polyfills.js (resolved id: /bar/polyfills.js). Does the file exist?
[1] 11:53:58 AM [vite] Pre-transform error: Failed to load url /bar/main.js (resolved id: /bar/main.js). Does the file exist?

Exception or Error

11:21:13 AM [vite] Pre-transform error: Failed to load url /bar/polyfills.js (resolved id: /bar/polyfills.js). Does the file exist?
11:21:13 AM [vite] Pre-transform error: Failed to load url /bar/main.js (resolved id: /bar/main.js). Does the file exist?

Your Environment

> [email protected] version
> ng version


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


Angular CLI: 19.0.0-next.6
Node: 20.17.0
Package Manager: npm 10.8.2
OS: linux x64

Angular: 19.0.0-next.6
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.0-next.6
@angular-devkit/build-angular   19.0.0-next.6
@angular-devkit/core            19.0.0-next.6
@angular-devkit/schematics      19.0.0-next.6
@schematics/angular             19.0.0-next.6
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.15.0

Anything else relevant?

Browser does not matter.
Previously there was a similar issue #27907
It was fixed by @alan-agius4 in #27910

[alan-agius4]

I looked at this again and it seems that it is no longer reproducible when using 19.0.0-next.7. Can you please verify?

[Exac]

@alan-agius4 I can still reproduce this on 19.0.0-next.7
repo: https://github.com/Exac/check-for-pre-transform-error-19.0.0-next.7

$ npm run start

> [email protected] start
> ng serve

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
Re-optimizing dependencies because vite config has changed
10:27:59 AM [vite] Pre-transform error: Failed to load url /bar/polyfills.js (resolved id: /bar/polyfills.js). Does the file exist?
10:27:59 AM [vite] Pre-transform error: Failed to load url /bar/main.js (resolved id: /bar/main.js). Does the file exist?

If our environments are perhaps different, add the following to Dockerfile:

FROM node:20-bookworm
RUN mkdir -p /app
WORKDIR /app
COPY package.json /app/
RUN ["npm", "install"]
COPY . /app
EXPOSE 4200/tcp
CMD ["npm", "start", "--", "--host", "0.0.0.0", "--poll", "500"]

$ docker build .
$ docker run -it --rm -p 4200:4200 <insert-your-hash>
$ curl http://localhost:4200/bar/foo

Also, I noticed that the dependencies in package.json aren't what I expect in the reproduction repo now:

{
  "name": "check-for-pre-transform-error-19.0.0-next.7",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:check-for-pre-transform-error-19.0.0-next.7": "node dist/check-for-pre-transform-error-19.0.0-next.7/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^19.0.0-next.0",
    "@angular/common": "^19.0.0-next.0",
    "@angular/compiler": "^19.0.0-next.0",
    "@angular/core": "^19.0.0-next.0",
    "@angular/forms": "^19.0.0-next.0",
    "@angular/platform-browser": "^19.0.0-next.0",
    "@angular/platform-browser-dynamic": "^19.0.0-next.0",
    "@angular/platform-server": "^19.0.0-next.0",
    "@angular/router": "^19.0.0-next.0",
    "@angular/ssr": "^19.0.0-next.7",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.0.0-next.7",
    "@angular/cli": "^19.0.0-next.7",
    "@angular/compiler-cli": "^19.0.0-next.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.6.2"
  }
}

I would have expected the versions of everything to be "^19.0.0-next.7" ?

I still see the vite errors when I manually change the versions to the newest possible version of each @angular package:

{
  "name": "check-for-pre-transform-error-19.0.0-next.7",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "serve:ssr:check-for-pre-transform-error-19.0.0-next.7": "node dist/check-for-pre-transform-error-19.0.0-next.7/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^19.0.0-next.6",
    "@angular/common": "^19.0.0-next.6",
    "@angular/compiler": "^19.0.0-next.6",
    "@angular/core": "^19.0.0-next.6",
    "@angular/forms": "^19.0.0-next.6",
    "@angular/platform-browser": "^19.0.0-next.6",
    "@angular/platform-browser-dynamic": "^19.0.0-next.6",
    "@angular/platform-server": "^19.0.0-next.6",
    "@angular/router": "^19.0.0-next.6",
    "@angular/ssr": "^19.0.0-next.7",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^19.0.0-next.7",
    "@angular/cli": "^19.0.0-next.7",
    "@angular/compiler-cli": "^19.0.0-next.6",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.6.2"
  }
}

$ npm i
$ npm run start

$ curl http://localhost:4200/bar/foo
11:11:48 AM [vite] Pre-transform error: Failed to load url /bar/polyfills.js (resolved id: /bar/polyfills.js). Does the file exist?
11:11:48 AM [vite] Pre-transform error: Failed to load url /bar/main.js (resolved id: /bar/main.js). Does the file exist?

Reproduction with manually updated package.json here: https://github.com/Exac/check-for-pre-transform-error-19.0.0-next.7/tree/update-package-json-patest-versions-and-add-dockerfile