title: Angular 6 Http client custom url and header
body: <p>I am working in an Angular 6 application and I was wondering what should be the best practice when customizing the url while sending requests to the server.</p>
  
  <p>Here is the scenario:
  - In my Angular project I have the environment.ts and environment.prod.ts where I added a "host" which contains the url:port of the http server (project with the controllers).
  - I am creating Services to be injected in my components which will be responsible for sending requests (GETs and POSTs) to the server to retrieve data or to send updates. 
  - I want to use the "host" from the environment.ts as part of the request url. So ALL my requests will have the "host" as the base url and then i can concatenate to the desired path.</p>
  
  <p>I already checked a few solutions and I already implemented one of them, but I am not sure this is the right practice. I will write below what i implemented so far and then i will write some ideas, please help me understand what is the best solution (I am new at angular)</p>
  
  <p><strong>Currently implemented:</strong></p>
  
  <p>-> In my feature services, like LoginService, I inject the angular HttpClient. Then I simply call:</p>
  
  <pre><code>return this.httpService.post("/login/", creds).pipe(
        map((data: any) =&gt; {
          this.manager = data;
          return this.manager;
        }));
  </code></pre>
  
  <p>I created an interceptor to make changes to the url: <strong>InterceptService implements HttpInterceptor</strong> where I create a new instance of the HttpRequest and customize the request.url using environment.host. I also needed the interceptor to add a Header for the authentication (still not fully implemented)</p>
  
  <pre><code>const httpRequest = new HttpRequest(&lt;any&gt;request.method, environment.host + request.url, request.body);
      request = Object.assign(request, httpRequest);
  
      const headers = new HttpHeaders({
        'Authorization': 'Bearer token 123',
        'Content-Type': 'application/json'
      });
  </code></pre>
  
  <p><strong>Questions:</strong></p>
  
  <blockquote>
    <p>1) This works, all my requests are changed in the interceptor as I
    wanted, but it doesn't look like the best practice in my first look. I
    don't like to create a new HeepRequest to be able to do this (i did it
    to keep it immutable, I guess that's the correct way). Do you think
    this looks good?</p>
    
    <p>2) What about the Authentication being added to the Header in the interceptor? Is it ok? Most of the references I checked did this</p>
  </blockquote>
  
  <p><strong>Other solutions:</strong></p>
  
  <p>1) I saw some examples where a HttpClientService extends Http and each of the methods such as get and post edit the url and headers before calling super methods. But I believe this is not Angular 6 and is probably not preferrable</p>
  
  <p>2) I could also create a service that receives an angular HttpClient (angular 6  HttpClientModule) instance by injection and I could implement the methods like get or post. </p>