Angular 16 dynamically determine the pathname and setting the base href in index.html

Discussão em 'Angular' iniciado por user30943195, Julho 1, 2025.

  1. user30943195

    user30943195 Guest

    I have a web application with an iFrame that has a SPA within it. The application is hosted on remote servers and is being opened up to proxy access. The issue I am having is being able to properly navigate to the inner application because a part of the URL is being dropped in the process. I can

    I have now set it up to do index transformation using @angular-builders/custom-webpack. This is a basic setup without any frills. I am able to tell it to set the base href from the typescript code. The problem I am having is getting the pathname from the window.location.

    index.ts

    import { TargetOptions } from '@angular-builders/custom-webpack';

    export default (targetOptions: TargetOptions, indexHtml: string): string | Promise<string> => {
    const pathname = "/UI/InnerApplication/";
    const baseTag = `<base href="${pathname}">`;

    indexHtml = indexHtml.replace(/<%= changeMe %>/g, baseTag);

    return indexHtml;
    };


    index.html

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Inner Application</title>
    <%= changeMe %>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="assets/Images/favicon.ico">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body>
    <app-root></app-root>
    </body>
    </html>

    Continue reading...
    user30943195, Julho 1, 2025
    #1

Compartilhe esta Página