CODEWITHSUNDEEP
angular
Jay
Jay

Reputation: 385

Angular 6 : How do I set production and development base url

New to angular I want to set different base url for production and development. I want to dynamically set it so that to reduce the pain of hard-coding in index.html while switching between production and development

<!-- Production url will be as below-->

<base url="/prod/" />

<!-- Development url will be as below-->

<base url="/dev/" />

Upvotes: 5

Views: 6936

Answers (4)

Osama AbuSitta
Osama AbuSitta

Reputation: 4066

You can change the production config in angular.json file under

architect>>build>>configurations>>production

You have to add the production baseHref, such as the below :

enter image description here

Upvotes: 2

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24434

You can use environments.ts , environment.prod.ts files at build(dev) time you will got environments.ts and production time you will be using environment.prod.ts

and you can setup your own configuration ⚙

Development 🏗

export const environment = {
  production: false , 
  url : '127.0.0.1:4200/api'
};

Production 🚀

export const environment = {
  production: true,
  url : 'production.com/api'
};

app.component

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

export class AppComponent {

  ngOnInit() {  
    console.log(environment.url);
  }
}

the console output will be 127.0.0.1:4200/api if you run ng s and production.com/api in case you run ng s --prod

When you build for production ng build --prod the environment.ts will be the content of environment.prod.ts

Becoming an Angular Environmentalist

Upvotes: 4

Robert Tab
Robert Tab

Reputation: 184

you need to have at least two typescript files in your angular project. environment.ts and environment.prod.ts. For development you have to use the simple ng serve and for production you have to build and specify that you need the url from production to be used.

To do that use: "ng build --prod."

An article about that can be found here .

Upvotes: 0

kriss
kriss

Reputation: 1015

For delevopment you can set this in environment.ts file. Like that 

export const environment = {
  production: false,
  baseUrl: 'http://test.net/api'  
};

and for production in environment.prod.ts 

export const environment = {
  production: true,
  baseUrl: 'https://prod.net/api'
};

Then you should use url in your services like that

@Injectable()
export class DataService {  

  baseUrl = environment.baseUrl;

  constructor(private httpClient: HttpClient) { }

  getData(id: number) {
    let url = this.baseUrl + '/data/1';
    return this.httpClient.get<JSON>(url);
  }
}

Upvotes: 0

Related Questions