How to configure the base href in angular with an environment variable of a tomcat or application servers?

Question

I would like to know if you can configure the base href as an environment variable of a tomcat or application server.

for example:

index.html

<base href="/${environment.tomcat}/">

or an environment variable for the operating system?

Answer 1

environment.ts

export const environment = {
  production: false,
  tomcat: '/'
};

environment.prod.ts

export const environment = {
  production: true,
  tomcat: '/my-app/'
};

And in your app module:~

import { Component, NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { environment } from '../environments/environment';

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: environment.tomcat}]
})
class AppModule {}

OR

Using Angular CLI built-in feature:~

# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/
ng build -bh /myUrl/

you can update scripts in package.json:~

"scripts": {
  //...
  "start": "ng serve -bh /anotherUrl/",
  "build": "ng build -bh /tomcatServerURL/",
  //..
},

Hope this is helpful!