Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Style and script tags respecting base href even when configured as absolute #30452

Closed as not planned
@trdyer

Description

@trdyer

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

Don't known / other

Is this a regression?

Yes

Description

While creating a new application I came across this behaviour.

Assuming I have an index.html like

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My newly generated app</title>
    <base href="/demo/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="/my/path/to/shared.css" />
    <script type="module" src="/my/path/to/shared.js"></script>
  </head>
  <body>
    <my-custom-web-component> </my-custom-web-component>
    <app-root></app-root>
  </body>
</html>

that will load a custom shared web component for many of my applications that are deployed at various paths under /.

ie
app 1 is deployed at /demo/
app 2 is deployed at /demo2/
Shared components are deployed at /my/path/to/*.*

Please provide a link to a minimal reproduction of the bug

I can create one if necessary

Please provide the exception or error you saw

The generated/served HTML looks like

<!doctype html>
<html lang="en">
  <head>
    <script type="module" src="/demo/@vite/client"></script>

    <meta charset="utf-8"/>
    <title>my newly generated app</title>
    <base href="/demo/" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="icon" type="image/png" href="favicon.png"/>
    <link rel="stylesheet" href="/demo/my/path/to/shared.css"/>
    <script type="module" src="/demo/my/path/to/shared.js"></script>
  <link rel="stylesheet" href="styles.css"></head>
  <body>
    <my-custom-web-component> </my-custom-web-component>
    <app-root></app-root>
  <script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>

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

ng version

Angular CLI: 20.0.0
Node: 22.16.0
Package Manager: npm 10.9.2
OS: darwin arm64

Angular: 20.0.0
... build, cli, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.2000.0
@angular-devkit/core         20.0.0
@angular-devkit/schematics   20.0.0
@schematics/angular          20.0.0
rxjs                         7.8.2
typescript                   5.8.3
zone.js                      0.15.1

Anything else?

I believe this behaviour is captured in this blog post claiming it started in ng 18

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions