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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^