angulartypescriptdynamic-programming

Is it possible in Angular 13 to deploy build in different domain having different apiURL without rebuilding the application?


I am working on a functionality in which i will make a build for DEV environment and deploy on DEV domain . Further , without rebuilding the application again for QC environment , i want to make use of DEV build and deploy the same build on QC environment with different apiurl mentioned in environment files.

Step 1:- Made 2 environemnt files :- 1 for dev api url and 2nd for qcapiurl.

Step 2:- Made environmentService.ts file , code mentioned below:-

export class EnvironmentService {

  private currentEnvironment: any;

 

  constructor() {

    // Determine the current domain or environment and load the appropriate config

    const currentDomain = window.location.hostname;

 

    if (currentDomain === 'https://devums.sahibandhu.com') {

      this.currentEnvironment = environmentDev.baseUrlDev;

    }

    else if (currentDomain === 'https://qcums.sahibandhu.com') {

      this.currentEnvironment = environmentQc.baseUrlDev;

    }

    else if (currentDomain === 'https://uatums.sahibandhu.com') {

      this.currentEnvironment = environmentUat.baseUrlDev;

    }

    else if (currentDomain === 'https://ums.sahibandhu.com') {

      this.currentEnvironment = environmentProd.baseUrlDev;

    }

    else {

      // Default to a specific environment if none matches

      this.currentEnvironment = environmentDev.baseUrlDev;

      console.log(this.currentEnvironment);

    }

  }

 

  getConfig() {

    return this.currentEnvironment;

  }

}

Step 3:- Register this service file in appmodule.ts file as

export function initializeApp(environmentService: EnvironmentService) {

  return () => environmentService.getConfig();

}

Step 4:- Fetch current environment variable during api call.

I was expecting that when i deploy dev build on QC environment the it should automatically takes qcums.sahibandhu.com domain. But on qc and dev anv it is taking same apiurl i.e. devums.sahibandhu.com because i have made the build with devums.sahibandhu.com.


Solution

  • I think I got you!

    When you are using: window.location.hostname

    This property will return the DOMAIN of the URL.

    In your cases will return:

    For dev: devums.sahibandhu.com For qc: qcums.sahibandhu.com And so on.

    You need to modify your if according to that. Example next:

    const currentDomain = window.location.hostname;
    
    
    
    if (currentDomain === 'devums.sahibandhu.com') {
    
      this.currentEnvironment = environmentDev.baseUrlDev;
    
    }
    
    else if (currentDomain === 'qcums.sahibandhu.com') {
    
      this.currentEnvironment = environmentQc.baseUrlDev;
    
    }
    
    else if (currentDomain === 'uatums.sahibandhu.com') {
    
      this.currentEnvironment = environmentUat.baseUrlDev;
    
    }
    
    else if (currentDomain === 'ums.sahibandhu.com') {
    
      this.currentEnvironment = environmentProd.baseUrlDev;
    
    }
    
    else {
    
      // Default to a specific environment if none matches
    
      this.currentEnvironment = environmentDev.baseUrlDev;
    
    }
    }
    

    That is why you are always going to the else condition.