Set HTTP Base URLs of Production and Development Environment - Angular 6 / Angular 7

Posted at: December 15, 2018 6:47 PM

If we are developing angular applicatin then we use development and production enviroment. We use REST API for both development and production enviroment. So we should use HTTP base URL in one place for development and production.

In angular application you can see src/environments folder. It contains two files environment.ts and environment.prod.ts for development and production environment. When we move application development to production then automatically call HTTP base URL.

environment.ts

Set base url in development environment


export const environment = {
  production: false,
  baseUrl: 'http://localhost/dev/blogger/'
};
Copy

environment.prod.ts

Set base url in production environment


export const environment = {
  production: true,
  baseUrl: 'http://localhost/blogger/'
};
Copy

blog.service.ts

Import environment into src/app/services/blog.service.ts


    .....
    import { environment } from '../../environments/environment';
Copy

Replace


serverUrl = 'http://localhost/dev/blogger/';
Copy

with


serverUrl = environment.baseUrl;
Copy

You can also replace all server url in following services like above blog.service.ts

  • src/app/auth/auth.service.ts
  • src/app/blogpost/blogpost.service.ts
  • src/app/cmspage/cmspage.service.ts
This lesson also available on YouTube
Production Environment Development Environment HTTP Base URL

More Posts - Angular Project Training

Download Theme
Download Web API
Download Angular App
Watch Video for Project Setup
Watch Videos of More Tutorials

Angular 6/7 Tutorial in Hindi

Angular 7 is a JavaScript based framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript, used to create Single Page Applications.

truecodex.com provides video tutorial for enough understanding of all the necessary components of Angular 6 and Angular 7.

truecodex.com will keep uploading videos of the latest features of Angular. Please subscribe my channel for latest videos.

Angular 6 / Angular 7 Tutorial in Hindi

Please leave comments

4 Comments


sandeep yadav 4 years ago
nice tutorial
Reply
demoamrit 6 years ago
When i refresh or reload page vai F5 featured blog API(http://localhost/dev/blogger/api/featured_blogs) call in all page. I think in the app.component.html file : - condition not work properly.
Reply
Nayeem Hyder Riddhi 6 years ago
Same error, while logged in, and it is not login, console error "Backend returned code 200, body was: [object Object]" and in page showing OOPS! REQUEST FOR DOCUMENT FAILED
Reply