Skip to content

Leading slash added to baseHref #32030

@daiscog

Description

@daiscog

Command

build

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

20.3.11

Description

Expected behavior

The value of the href attribute of the <base> tag in the built index.html file should start with what's defined in the baseHref property of the builder.

Actual behavior

A leading / is added when the baseHref value does not start with one.

Impact

We package our built apps inside docker images that process the index.html file on startup to replace certain strings matching ${...} with values from environment variables. This allows us to deliver portable docker images that can be deployed under different paths in different environments by simply setting the BASE_HREF environment variable.

So when building our app, we set baseHref in the build config to a string like ${BASE_HREF}.

With Angular 20.3.11, this produced the following tag in index.html (with a localized build):

<base href="${BASE_HREF}/en/"/>

Since Angular 20.3.13, we now get a leading slash added:

<base href="/${BASE_HREF}/en/"/>

For deployments where our BASE_HREF value is an empty string, this results in the base href value of //en/ which is a protocol-relative URL and so all of our resources fail to load.

Minimal Reproduction

Create an Angular app with 20.3.13, set baseHref to a value that does not start with /, enable localization, build.

Exception or Error

 

Your Environment

Angular CLI: 20.3.13 Node: 22.14.0 Package Manager: npm 10.9.2 OS: darwin arm64 Angular: 20.3.15 ... animations, common, compiler, compiler-cli, core, forms ... language-service, localize, platform-browser ... platform-browser-dynamic, router Package Version ------------------------------------ @angular-devkit/architect 0.2003.13 @angular-devkit/core 20.3.13 @angular-devkit/schematics 20.3.13 @angular/build 20.3.13 @angular/cdk 20.2.14 @angular/cli 20.3.13 @schematics/angular 20.3.13 rxjs 7.8.1 typescript 5.9.3 zone.js 0.15.1 

Anything else relevant?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions