Can I retrieve the --base-href parameter value in my code when building an Angular project?

Question

For my Angular project I have multiple environments, each for a particular DTAP stage. When building this Angular project I set the --base-href flag to the corresponding base URL. However, I also have a URL set in my code which belongs to a second web server to correspond with. This web server also has multiple DTAP stages. So, I would like to be able to 'know' in my code which --base-url flag value is set to be able to set a variable to the corresponding URL of the second web server.

Since I could not find anything on this subject I have been unable to achieve any successes. For now I have it set up so that I have to manually change the variable's value. But I want to get rid of that practice since it is easily forgotten when building the project.

The idea is to have to 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 to build with are fixed, so I know what text will be in them so that I can ensure that the URL for the second web server is always set correcly.

If anybody could point me in the right direction to achieve this that would be greatly appreciated!

Answer 1

You can add another variable to your environment.ts . when you compile, that value will be set per environment, allowing to reference that variable 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') {
      // whaever
    }
  }

}

• also be aware that using environment, is not really something you want to do, because that means the code that runs on e nvironment A is not the same that runs on environment B as you compile per environment.

a better approach would be, to invoke an http request when the app loads, to fetch a plain json file / db record, holding those settings at the server. that way you can copy-paste your test-proven code, straight to production, excluding the json file, and it just works.

read more at: Dave M Bush's article - where-to-store-angular-configurations

Answer 2

In the end the solution to this question is really simple and not necessarily related to the --base-href.

I solved this problem not by looking up the --base-href when building the Angular project, but by looking at the URL when the app is already live:

public static url: string = location.href.indexOf('test') > -1             // Test environment
                             || location.href.indexOf('localhost') > -1    // Local environment
                            ? 'https://test.com'
                            : location.href.indexOf('staging') > -1        // Staging environment
                            ? 'https://staging.com'
                            : location.href.indexOf('demo') > -1           // Demo environment
                            ? 'https://demo.com'
                            : 'https://deployment.com';                    // Deployment environment

Since these URL's will be static and will not change I am confident that these settings will be sufficient to see which URL needs to be used.