app.module.ts

import './rxjs-extensions';  // Needed RxJS Observable extensions combined into one file  
import { NgModule }                       from '@angular/core';
import { CommonModule }                   from '@angular/common';
import { BrowserModule, Title }           from '@angular/platform-browser';
import { FormsModule }                    from '@angular/forms';
import { HttpModule, Http }               from '@angular/http';
// Modules
import { AppRoutingModule }               from './app-routing.module';
import { SellingModule }                  from './selling/selling.module';
import { GrowingModule }                  from './growing/growing.module';
// Services
import { AppService }                     from './app.service';
import { UserService }                    from './user.service';
//import { AuthenticatedHttpService }       from './authenticated-http.service';
import { ExtendedHttpService }            from './extended-http.service';
import { SubNavService }                  from './sub-nav.service';
import { WhatsNextGuideService }          from './whats-next-guide.service';
import { VarietyMenuService }             from './varieties/variety-menu.service';
// Components
import { AppComponent }                   from './app.component';
import { WhatsNextGuideComponent }        from './whats-next-guide.component';
import { SubNavComponent }                from './sub-nav.component';
import { AddVarietiesComponent }          from './varieties/add-varieties.component';
import { VarietyEditComponent }           from './varieties/variety-edit.component';
import { PageNotFoundComponent }          from './page-not-found.component';


@NgModule({
	// contains the list of external modules used by our application
    imports: [
        CommonModule,
		BrowserModule,
		FormsModule,
		HttpModule,		   
        SellingModule,
        GrowingModule,
        AppRoutingModule
	],
	// contains the list of all components, pipes, and directives that we created and that belong in our application's module. Allows Angular to recognize created selectors.
	declarations: [
        AppComponent,
        WhatsNextGuideComponent,
        SubNavComponent,
        AddVarietiesComponent,
        VarietyEditComponent,
        PageNotFoundComponent
	],
	providers: [		
        Title,
        AppService,
        UserService,
        //{ provide: Http, useClass: AuthenticatedHttpService },
        { provide: Http, useClass: ExtendedHttpService },
        SubNavService,
        WhatsNextGuideService,
        VarietyMenuService
	],
  	bootstrap: [ AppComponent ]
})

export class AppModule { }

extended-http.service.ts

import { Injectable }                                                                       from '@angular/core';
import { Request, XHRBackend, RequestOptions, Response, Http, RequestOptionsArgs, Headers } from '@angular/http';
import { Observable }                                                                       from 'rxjs/Observable';
import { Router }                                                                           from '@angular/router';
import { UserService }                                                                      from './user.service';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

declare var $: any;  // Allowing JQuery to be used

@Injectable()
export class ExtendedHttpService extends Http {

    constructor(backend: XHRBackend, defaultOptions: RequestOptions, private router: Router, private userService: UserService) {    
        super(backend, defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        //do whatever 
        if (typeof url === 'string') {
            if (!options) {
                options = { headers: new Headers() };
            }
            this.setHeaders(options);
        } else {
            this.setHeaders(url);
        }

        return super.request(url, options).catch(this.catchErrors());
    }

    private catchErrors() {
        return (res: Response) => {
            if (res.status === 401 || res.status === 403) {
                //handle authorization errors
                console.log('The authentication session expired or the user is not authorized');
                console.log(res.status);
                this.userService.getRefreshToken().subscribe(res => {
                    console.log('refresh token....');
                    console.log(res);
                    //this.userService.accessToken = res["_body"];                    
                });


                // Reload page so user gets new access token
                //location.reload();
                //$('#accessTokenExpired').modal('show');
            }
            return Observable.throw(res);
        };
    }

    private setHeaders(objectToSetHeadersTo: Request | RequestOptionsArgs) {
        //add whatever header that you need to every request
        //in this example I add header token by using authService that I've created
        objectToSetHeadersTo.headers.set('Token', this.userService.accessToken);
    }
}

user.service.ts

import { Injectable }                              from '@angular/core';
import { Headers, Http, RequestOptions, Response } from '@angular/http';
import { Observable }                              from 'rxjs/Observable';
import { Subject }                                 from 'rxjs/Subject';

import { AppService }                              from './app.service';

...
...
public constructor(
    private http: Http,
    private appService: AppService
) { }
...
...