Can the base tag be used conditionally?

My Angular app is set to be deployed on two different sites with the same code base. I have configured the base tag for site A like this:

<base href="https://A.com/">

However, for the second site (site B), I need to use a different base tag:

<base href="https://B.com/">

Since the repository is the same, I am wondering if there is a way to achieve this dynamic base tag configuration?

I attempted using:

<base href="/">

But this approach causes problems when reloading the app in nested states. For example, when the URL is , the app tries to fetch resources from the /x/y/z path instead of the root directory.

Is there any solution to ensure that resources are always fetched from the root?

Thank you in advance for your help.

Answer №1

Give this a shot

<base href="{{(siteName == 'site A')?'https://A.com/':'https://B.com/'}}">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the issue with the transform property not functioning correctly?

When using two transforms, they typically do not apply simultaneously. However, during the hover event, they can replace each other. Below is the code for a button that I am attempting to create, but the properties do not seem to work properly upon hoverin ...

Remove the active class after it has been clicked for the second time

Currently, I am working on a menu/submenu system where I want to toggle active classes when clicked. However, I encountered an issue - if the same menu item is clicked twice, I need to remove the active class. Initially, I tried using jQuery's toggleC ...

Discover the nodes with the highest connections in a D3 Force Graph

As I explore the functionalities of a D3 Force Directed Graph with zoom and pan features, I encounter an issue due to my limited knowledge of d3.js. Is there a way to estimate the number of links for each node in this scenario? I am currently at a loss on ...

"Use AJAX to dynamically update a div element when a button is clicked with a specific value

I have a calendar that is being displayed server side using PHP. My goal now is to allow users to scroll through the months with two buttons (<< / >>) without having to reload the entire page. I have come across many similar questions and examp ...

What is the best way to ensure that this form field remains hidden when the page is loaded?

In my Django project, I have a form that should only display the entity name on page load. However, it is currently showing both the entity name and quote text fields. The quote text field should only be visible when the entity name is not in the database. ...

Tips for showing a different div in the chat window after submitting the form

My index html file features a chat window designed like this: https://i.sstatic.net/PPGoy.png Below the submit button is an area to input text. How can I hide or disable this section and enable it only after the form is filled and the submit button is cl ...

What is the reason that certain CSS pages are not being utilized on my website?

I am facing issues with rendering my website on a tablet device, specifically with my last 2 css pages (800px.css and 800pxland.css). Despite working fine just hours ago, now they seem to be neglected while all the other ones work perfectly. I have tried ...

Having trouble retrieving the default selected value using the index in Angular Material's mat-button-toggle functionality

I'm encountering an issue with setting the default value for a toggle button group. The code is simple and the toggle buttons are correctly fetching values from the index, but I can't seem to get one of them to be default selected. I tried settin ...

Is Intellisense within HTML not available in SvelteKit when using TypeScript?

Having trouble with intellisense inside HTML for a simple page component. Also, renaming properties breaks the code instead of updating references. Typescript version: 4.8.4 Below is the code snippet: <script lang="ts"> import type { Bl ...

Incorporate a fresh label for a function utilizing AngularJS

I want to insert a new HTML tag with an event attached to it. Here is an example of what I am trying to achieve: <html ng-app="module"> <head> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script&g ...

Tips for replicating background-image appearance while ensuring compatibility with printing requirements

Is there a way to crop images horizontally using CSS, while keeping the images visible during printing? I am currently utilizing background-image to crop images to a width of 200px without knowing the image widths in advance. My goal is to have the middle ...

Pattern matching technique to capture content within a span tag

In C#, I am looking to extract the value "nHKS8cG006" from the following code snippet: "Content from Eikon: <span class="tr-pnac" id="x2">ID:nHKS8cG006</span>" The text "Content from Eikon" should be part of the regular expression, and the cla ...

Exploring the ways to center align text using bootstrap

I used Twitter Bootstrap to arrange text and image side by side, but I'm having trouble centering the text. Do you have any ideas on how to achieve this? <div class="row"> <div class="col-sm-1"> <a href="ghfhg"><i cla ...

Comparing ASP.Net MVC Validation Techniques: Angular vs. Razor

When using ASP.Net MVC with Custom Attributes in your model and Razor, you have the convenience of easily writing an HTML Helper like @Html.ValidationMessageFor(model => model.MyAttribute) for validating each field. On the other hand, AngularJS operate ...

Creating a Custom Bootstrap 4 Sticky Footer with Navigation Links and Copyright Notice

I am currently working on implementing the Bootstrap 4 Sticky footer example Everything seems to be working fine if I only have either the nav element or the span element as a child of the footer. However, when I include both elements, only the first one ...

What is the most efficient method for populating *interconnected data-dependent* <select> dropdowns in a Rails application?

When users need to choose a car from our system, they are faced with multiple dropdown menus to select the year, make, model, and submodel. The challenge lies in the fact that these options are interdependent, making it necessary to retrieve data through s ...

Is it necessary to verify user input in a registration form using PHP?

I currently do not have any code to share, as the issue at hand is not directly related to coding. However, I am interested in verifying certain aspects of user input, such as ensuring a phone number entered in a registration form is limited to 8 digits an ...

What are the steps to launch an Angular application using GitHub's Codespace?

After successfully installing Node (v. 19.4) and npm (v. 9.2.0), I set the default port for Angular as 4200. In my repository's Codespace, I configured the port item to be 4200 as well. When I ran "ng serve" in the CMD of Codespace, I anticipated se ...

Issue with h2 tag within JQuery's read more feature

How can I modify my jQuery code to wrap the middle text in an h2 tag? I am currently using a code snippet from code-tricks. You can find the original code snippets here: $(document).ready(function() { var showChar = 100; var ellipsestext = "..."; ...

Showcasing a pair of hues within a single td element

Hey there, I'm looking to have two different text colors in a single table data area. For example: <tr> <td bgcolor="#FFFF00">This text is Yellow! and This test is blue </td> </tr> I'm wonderin ...