Angular2 How to switch baseURL between prodmode and test mode

Question

Hi I am currently testing my app in development mode and i have baseURL globally set but now I want to enable production mode and I want to use a different baseURL in production mode and switch two baseURLs between two mode (dev mode and prod mode)

How can I do this?

I am using npm run dev-start command to run dev mode.

Answer 1

It's too easy with angular cli. Firstly, go to your .angular-cli.json file and edit environments;

"environments": {
     "dev": "environment/environment.ts",
     "prod": "environments/environment.prod.ts",
     "yourCustomEnv": "environments/environment.yourCustomEnv.ts"
}

Secondly, add api url as a property in environment.yourCustomEnv.ts file;

export const environment = {
     production: ...,
     apiUrl: 'youApiUrl'
}

Afterwards, use environment variable wherever you want to set the api url;

import { environment } from 'pathTo/environments/environment';
export class XService {
     apiUrl = environment.apiUrl;
     ...
}

Finally, build your application with the following commands;

ng build --env=yourCustomEnv ...

Angular-cli automatically use environment.yourCustomEnv.ts file at every place where you import environment.

By the way, be sure that your all environment variables have same properties.