title: Angular sends an http request twice
body: <p>I have written an app in Angular 4. And it looks like angular makes 2 requests each time I try to access an API. This happens for all methods across my app including; GET, DELETE, PUT, POST</p>
  
  <p>I will add some code sample below. For example I have a NotificationComponent that lists a ll notifications from the database. The NotificationComponent has a method which loads the notifications on <code>ngOnInit</code>;</p>
  
  <pre><code>    this.NotificationService.All(AdditionalParams)
          .subscribe(
              notifications =&gt; {
                this.AllNotifications.Notifications = notifications.data;
                this.AllNotifications.Data = notifications;
                this.AllNotifications.Loading = false;
                this.AllNotifications.Loaded = true;
                this.AllNotifications.HasRequestError = false;
              },
              (error)=&gt;  {
                this.AllNotifications.Loading = false;
                this.AllNotifications.Loaded = false;
                this.AllNotifications.RequestStatus = error.status;
                if (typeof error.json == 'function' &amp;&amp; error.status!=0) {
                  let errorObject = error.json();
                  this.AllNotifications.RequestError = errorObject;
                } else {
                  this.AllNotifications.RequestError = "net::ERR_CONNECTION_REFUSED";
                }
                this.AllNotifications.HasRequestError = true;
              });
    }
  </code></pre>
  
  <p>The method subscribes to the All method found in the NotificationService. The All method looks like this;</p>
  
  <pre><code>  All(AdditionalParams: object): Observable&lt;any&gt; {
      let options = new RequestOptions({ headers: this.headers });
      let params = new URLSearchParams();
      //params.set("token", this.authenticationService.token);
      for (var key in AdditionalParams) {
        params.set(key, AdditionalParams[key]);
      }
      options.params = params;
      return this.http.get(this.notificationsUrl, options)
          .map(response =&gt; response.json())
          .catch(this.handleError);
    }
  </code></pre>
  
  <p>Somehow the request is sent twice. I think this in my console log;</p>
  
  <pre><code>XHR finished loading: GET "[REMOVED]/notifications?page=1&amp;event=1&amp;token=eyJ0eXAiOi…GkiOiJ1bGYxSnJPa1Zya0M2NmxDIn0.3kA8Pd-tmOo4jUinJqcDeUy7mDPdgWpZkqd3tbs2c8A"
  XHR finished loading: GET "[REMOVED]/notifications?page=1&amp;event=1&amp;token=eyJ0eXAiOi…GkiOiJ1bGYxSnJPa1Zya0M2NmxDIn0.3kA8Pd-tmOo4jUinJqcDeUy7mDPdgWpZkqd3tbs2c8A"
  </code></pre>
  
  <p>About 3 seconds apart.</p>
  
  <p>I have a service called "AuthenticationService". In this service I have added an http interceptor using ng-http-interceptor. The http interceptor gets added to all requests. And it looks like this;</p>
  
  <pre><code>httpInterceptor.request().addInterceptor((data, method) =&gt; {
              console.log ("Before httpInterceptor: ", data);
              var RequestOptionsIndex = null;
              for (var _i = 0; _i &lt; data.length; _i++) {
                  if (typeof data[_i] == 'object' &amp;&amp; data[_i].hasOwnProperty('headers')){
                      RequestOptionsIndex = _i;
                  }
              }
              if (RequestOptionsIndex == null) {
                  let options = new RequestOptions({headers: new Headers({'Content-Type': 'application/json'})});
                  let params = new URLSearchParams();
                  data.push(options);
                  RequestOptionsIndex = data.length-1;
              }
              //console.log (data, this.loginURL, 'RequestOptionsIndex: ', RequestOptionsIndex);
              if (!data[RequestOptionsIndex].hasOwnProperty('headers')){
                  data[RequestOptionsIndex].headers = new Headers({'Content-Type': 'application/json'});
              }
              if (data[0]!=this.loginURL &amp;&amp; (data[RequestOptionsIndex].headers.get('Authorization')=="" || data[RequestOptionsIndex].headers.get('Authorization')==null)) {
                      data[RequestOptionsIndex].headers.append("Authorization", 'Bearer ' + this.token);
              }
              if (data[RequestOptionsIndex].params!=undefined &amp;&amp; data[RequestOptionsIndex].params!=null) {
                  data[RequestOptionsIndex].params.set('token', this.token);
              }else {
                  let params = new URLSearchParams();
                  params.set('token', this.token);
                  data[RequestOptionsIndex].params = params;
              }
              console.log ("httpInterceptor data", data, ": RequestOptionsIndex", RequestOptionsIndex);
              return data;
          });
          httpInterceptor.response().addInterceptor((res, method) =&gt; {
              res.map(response =&gt; response.json())
                  .catch((err: Response, caught: Observable&lt;any&gt;) =&gt; {
                      if (err.status === 401) {
                          this.logout();
                          this.router.navigate(["/login"]);
                          location.reload();
                          return Observable.throw("401 Unauthorized");
                      }
                      return Observable.throw(caught); // &lt;-----
                  }).subscribe()
              return res;
          });
  </code></pre>