Description
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.