Skip to content

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

Closed
@Exac

Description

@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/cli@19.0.0-next.2 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

> check-for-pre-transform-error-19.0.0-next.2@0.0.0 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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions