Children routes triggering Vite log error: '[vite] Pre-transform error: Failed to load url'

[thiagosoutodev]

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:

Created new Angular standard SSR project (without the developer preview features) with 19.0.2 CLI about two weeks ago. But I only started to develop its features and routes today. Then I found this minor bug: when my path is redirected to a child route or when I refresh the child route's webpage, I keep getting vite log erros in my VSCode terminal (check 'Exception or Error' section further down).

This won't happen with routes that are notnested (that are not child or grandchild routes). I also tested without lazy-loading the children routes, and the problem persists. Another thing: the error also appears even if the route is not nested through the children or loadChildren properties, but simply by its path string, for example:

export const appRoutes: Routes = [
  {
    path: 'user/profile',
    pathMatch: 'full',
    component: ProfileComponent
  },
];

Nonetheless, the application seems to work normally, but I couldn't test a lot since there is not a lot of features yet in my application. If I run ng build and run the SSR default script node dist/{project-name}/server/server.mjs, there are no error logs at all.

One thing that is interesting to mention is that if you look into my code, my application is set to redirect the root path to the authentication module, which has its own <router-outlet />, and then the module redirects the user to the 'authentication/#'. So, when I run ng serve and access http://localhost:4200, I go directly to the mentioned login route and page, and I see the Vite error log. But, if I remove the root route redirect to 'authentication' and create a navbar inside app.component.html with a routerLink property that targets the child route 'authentication/#', the first time the page is rendered, I see no error log, but if I refresh the page, Vite logs it in the console.

My Code:

src/app/app.routes.ts

import { Routes } from '@angular/router';

export const appRoutes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'authentication',
  },
  {
    path: 'authentication',
    loadChildren: () =>
      import('./features/auth/presentation/shell/auth-shell.routes').then(
        (m) => m.authRoutes
      ),
  },
];

src\app\features\auth\presentation\shell\auth-shell.routes.ts

import { Routes } from '@angular/router';

import { makeBrowserPageTitle } from '@shared/presentation/utils/make-browser-page-title';

import { AuthLoginPageComponent } from '../pages/#/auth-login-page.component';

import { AuthShellComponent } from './auth-shell.component';

export const authRoutes: Routes = [
  {
    path: '',
    component: AuthShellComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'login',
      },
      {
        path: 'login',
        pathMatch: 'full',
        component: AuthLoginPageComponent,
        title: makeBrowserPageTitle({ beginningText: 'Login' }),
      },
    ],
  },
];

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "{project-name}": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/{project-name}",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": ["src/styles.scss"],
            "stylePreprocessorOptions": {
              "includePaths": ["src/app/resources/scss/partials"]
            },
            "scripts": [],
            "server": "src/main.server.ts",
            "prerender": true,
            "ssr": {
              "entry": "src/server.ts"
            }
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4kB",
                  "maximumError": "8kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.development.ts"
                }
              ]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "{project-name}:build:production"
            },
            "development": {
              "buildTarget": "{project-name}:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": ["zone.js", "zone.js/testing"],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": ["src/styles.scss"],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
          }
        }
      }
    }
  },
  "cli": {
    "schematicCollections": ["angular-eslint"]
  }
}

Minimal Reproduction

I created a repository that replicates the problem: ng-19.0.2-vite-pre-transformer-error. Git clone the repo to your machine and run the commands:

*Make sure you have Node 22, Angular CLI 19 and pnpm 9 installed):

pnpm install

ng serve

Then, access http://localhost:4200 in your browser and navigate through the links on the top left of screen while watching your running terminal.

Exception or Error

19:32:36 [vite] Pre-transform error: Failed to load url /authentication/polyfills.js (resolved id: /authentication/polyfills.js). Does the file exist?
19:32:36 [vite] Pre-transform error: Failed to load url /authentication/main.js (resolved id: /authentication/main.js). Does the file exist?

Your Environment

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

Angular CLI: 19.0.2
Node: 22.11.0
Package Manager: pnpm 9.14.4
OS: win32 x64

Angular: 19.0.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.2 (cli-only)
@angular-devkit/build-angular   19.0.2
@angular-devkit/core            19.0.2 (cli-only)
@angular-devkit/schematics      19.0.2 (cli-only)
@angular/cdk                    19.0.2
@angular/cli                    19.0.2
@angular/material               19.0.2
@angular/ssr                    19.0.2
@schematics/angular             19.0.2 (cli-only)
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Anything else relevant?

Previous mentions of similar bugs and their PRs with fixes:

a)

• Issue Vite pre-transform error on ng serve depending on the first route loaded in 19.0.0.next-2 #28442
• PR feat(@angular/build): utilize ssr.entry in Vite dev-server when available #28463

b)

• Issue Vite Pre-transform error #26897
• PR fix(@angular-devkit/build-angular): pre-transform error when using vite with SSR #26913

[aeslinger0]

@alan-agius4 will this fix it when prerender is true and ssr is false as well?

[alan-agius4]

Yes

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