Is there a way to access the value of the --base-href parameter in my Angular project during the build process?

Question

Is there a way to access the value of the --base-href parameter in my Angular project during the build process?

In my Angular project, I have set up multiple environments for different stages of development, testing, acceptance, and production. Each environment has a specific base URL, which I designate using the --base-href flag during the project build. However, I also need to connect to a second web server that also has its own set of DTAP stages. I am looking for a way to automatically determine which base URL flag is set so that I can assign the corresponding URL for the second web server in my code.

Despite my efforts to find information on this topic, I have not been successful in achieving the desired outcome. Currently, I manually update the variable value, but I want to eliminate this step as it is prone to oversight during project builds.

My goal is to implement the following code:

    let url;
    if (base-href.contains('test'))
        url = 'https://test.com';
    else if (base-href.contains('acceptance'))
        url = 'https://acceptance.com'
    else if (base-href.contains('deployment'))
        url = 'https://deployment.com'

    // Send API call to URL

The URLs I use for building are consistent, allowing me to predict their content and ensure correct assignment of the second web server URL.

If anyone can provide guidance on how to achieve this functionality, I would greatly appreciate it!

angular typescript angular-cli

Answer 1

Answer №1

If you need to introduce another variable into your environment.ts file, simply add it there. This way, when you compile your code, that variable will be customized for each environment, allowing you to access it in your code.

export const environment = {
  production: true,
  host: 'test'
};

In your component:

import { environment } from '../environments/environment';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    if (environment.host == 'test') {
      // do something
    }
  }

}

It's important to note that relying heavily on the environment variable may not be the best approach. This is because the code that works on one environment may not work on another due to the separate compilation for each environment.

A more efficient method would be to make an HTTP request when the application loads to retrieve configuration settings from a JSON file or database record stored on the server. This way, you can easily deploy your tested code to production without worrying about environment-specific variables.

For further information, you can refer to: Dave M Bush's article - where-to-store-angular-configurations

Answer 2

If you need to introduce another variable into your environment.ts file, simply add it there. This way, when you compile your code, that variable will be customized for each environment, allowing you to access it in your code.

export const environment = {
  production: true,
  host: 'test'
};

In your component:

import { environment } from '../environments/environment';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor() {}

  ngOnInit() {
    if (environment.host == 'test') {
      // do something
    }
  }

}

It's important to note that relying heavily on the environment variable may not be the best approach. This is because the code that works on one environment may not work on another due to the separate compilation for each environment.

A more efficient method would be to make an HTTP request when the application loads to retrieve configuration settings from a JSON file or database record stored on the server. This way, you can easily deploy your tested code to production without worrying about environment-specific variables.

For further information, you can refer to: Dave M Bush's article - where-to-store-angular-configurations

Is there a way to access the value of the --base-href parameter in my Angular project during the build process?

Answer №1

Similar questions

Leverage ngFor multiple times to iterate through the same array

The Azure function application's automatic reload feature does not function properly with the v4 model

Using @carbon/react in conjunction with Next.js version 13 leads to unconventional styling

Using HttpClient to post data to Django backend for seamless information transfer

What is the best way to utilize ngStyle in combination with Interpolation?

Having difficulties injecting a Service into a TypeScript Controller

Convert a file into an empty array when sending a post request from Angular to Laravel

Issues with FormsModule functioning incorrectly when used in a separate module other than the main App Module

a guide on accessing key value elements within an array using Ionic 3

Postgres Array intersection: finding elements common to two arrays

Troubleshooting issue: matTooltip malfunctioning in *ngFor loop after invoking Angular's change

Error: The page you are trying to access does not have a valid default export. The provided type is not acceptable

What is the best way to handle asynchronous actions while initializing a database in Next.js?

Warning: Angular Compilation Issue - Deprecation Advisory

Exploring the synergies between Angular 5 and atmosphere.js

Differentiating functions in Typescript through method overloading by inferring the second argument's type based on the first argument's

Is there a way to transfer data from a custom hook to a component seamlessly?

Step-by-step guide on importing `block-ui`, `spectrum-colorpicker`, and `sass.js` libraries in a TypeScript project

What is the reason behind a tuple union requiring the argument `never` in the `.includes()` method?

Mapping an array based on specific conditions