Angular 6：如何设置生产和开发基础 url

Question

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/" />

Answer 1

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

Answer 2

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);
  }
}

Answer 3

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 .

Answer 4

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 :