vite's @id prefix isn't removed everywhere

[bh3605]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

Supposedly, the angular-plugin-remove-id-prefix vite plugin is suppose to strip vite's @id prefix for external libraries. This reproduction will show that it isn't working as expected.

package.json

{
  "name": "angular19",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^19.2.0",
    "@angular/compiler": "^19.2.0",
    "@angular/core": "^19.2.0",
    "@angular/forms": "^19.2.0",
    "@angular/platform-browser": "^19.2.0",
    "@angular/platform-browser-dynamic": "^19.2.0",
    "@angular/router": "^19.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.15.0"
  },
  "devDependencies": {
    "@angular-builders/custom-esbuild": "^19.1.0",
    "@angular-devkit/build-angular": "^19.2.15",
    "@angular/cli": "^19.2.15",
    "@angular/compiler-cli": "^19.2.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.6.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.7.2"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Angular19": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/angular19",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "externalDependencies": [
              "rxjs",
              "rxjs/operators",
              "@angular/*",
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4kB",
                  "maximumError": "8kB"
                }
              ],
              "outputHashing": "none"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "Angular19:build:production"
            },
            "development": {
              "buildTarget": "Angular19: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",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

routes.ts

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

export default [
] as Routes;

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
    selector: 'myapp-root',
    imports: [RouterOutlet],
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

  copyrightYear: number = new Date().getFullYear();

  ngOnInit() {

  }

}

app.component.html

<router-outlet></router-outlet>

app.component.css is empty

Run ng serve --configuration production --ssl --port 4250 -o
Change the url to https://localhost:4250/main.js to view the file.

Your main.js file should look something like this minus the //# sourceMappingURL code on the bottom

import{bootstrapApplication as c}from"@angular/platform-browser";import{APP_BASE_HREF as m}from"@angular/common";import{provideHttpClient as a}from"@angular/common/http";import{provideRouter as d}from"/@id/@angular/router";var n=[];var r={providers:[{provide:m,useValue:"/"},a(),d(n)]};import{RouterOutlet as f}from"/@id/@angular/router";import*as o from"/@id/@angular/core";var t=class e{copyrightYear=new Date().getFullYear();ngOnInit(){}static \u0275fac=function(p){return new(p||e)};static \u0275cmp=o.\u0275\u0275defineComponent({type:e,selectors:[["myapp-root"]],decls:1,vars:0,template:function(p,s){p&1&&o.\u0275\u0275element(0,"router-outlet")},dependencies:[f],encapsulation:2})};c(t,r).catch(e=>console.error(e));


Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 19.2.15
Node: 20.19.1
Package Manager: npm 10.8.2
OS: win32 x64

Angular: 19.2.14
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.15
@angular-devkit/build-angular   19.2.15
@angular-devkit/core            19.2.15
@angular-devkit/schematics      19.2.15
@angular/cli                    19.2.15
@schematics/angular             19.2.15
rxjs                            7.8.2
typescript                      5.7.3
zone.js                         0.15.1

Anything else?

This is the smallest reproduction I could figure out.

[alan-agius4]

I am not able to replicate this using the latest version of the Angular CLI.

If the problem persists in your application after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior. You can use ng new repro-app to create a new project where you reproduce the problem.

[bh3605]

@alan-agius4 Closing this seems premature since I described this was in Angular 19 and not Angular 20 and gave example code you could use... Also if you understood how Vite treats externals and why you guys wrote that angular-plugin-remove-id-prefix plugin then you would know what the expected and current behavior is. I'm showing what the current behavior is in the code example. You shouldn't have closed this. I can't afford to use Angular 20 at this time and Angular 19 is still supported.

[alan-agius4]

Angular 19 is currently in LTS and only receives security fixes. I’ve tested the issue with version 20, and it is not reproducible. If you're still able to reproduce the problem with version 20, please share a runnable reproduction.

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