python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
7 Routing and Navigation

Append Base URL to HTTP requests - Angular

How to Append Base URL to HTTP requests?
We can append base URL to HTTP requests using –
1.      Dependency Injection
2.      Using HttpInterceptors

The following example for append base URL using DI -
Firstly, we register a base URL provider in the NgModule and after register this BASE_URL, it is available universally in your Apps.

  //Runtime or injector configuration
  //providers is used for runtime injector configuration.
  providers: [{ provide: 'BASE_URL'useFactory: getBaseUrl }],

Now provide factory method which gets the base URL from <base> element.
export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href;
}

Finally, we can get the base URL injected and add it to URL-
export class GetUserComponent {

  constructor(httpHttp, @Inject('BASE_URL'baseUrlstring) {
      http.get(baseUrl + 'api/users').subscribe(data => {
          this.users = data.json();
      }, error => console.error(error));
  }
}

The following example for append base URL using HttpInterceptors –

If we wants to create an interceptor, we must create an Injectable class which implements HttpInterceptor.

Firstly, register interceptor in the module provider -
  //Runtime or injector configuration
  //providers is used for runtime injector configuration.
  providers: [{ provide: HTTP_INTERCEPTORSuseClass: ApiInterceptormulti: true } ],

And after register interceptor, to create –
@Injectable()
export class ApiInterceptor implements HttpInterceptor {
   //Intercepts HttpRequest and handles them.
    intercept(reqHttpRequest<any>, nextHttpHandler): Observable<HttpEvent<any>> {
       
        const baseUrl = document.getElementsByTagName('base')[0].href;
        const apiReq = req.clone({ url: `${baseUrl}${req.url}` });
        return next.handle(apiReq);
    }
}

Now we can access the base URL in your across apps.
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions