extend JwtHttp

app.m.ts

// Imports
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared/modules';
import { AppRoutingM } from './app-routing.m';
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';

// Declarations
import { AppC } from './app.c';
import { errorD } from './routes/error/index';

// Providers
import { services } from './shared/services';
import { Http } from '@angular/http';

@NgModule({
  declarations: [AppC, errorD],
  imports: [
    BrowserModule,
    SharedModule,
    AppRoutingM,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n'),
      deps: [Http]
    })
  ],
  providers: [services],
  bootstrap: [AppC]
})
export class AppM {
}

auth.s.ts

import { Injectable } from '@angular/core';
import { RequestOptions, Headers, RequestOptionsArgs } from '@angular/http';
import { AuthService as NgAuthService, SharedService, LocalService, OauthService, JwtHttp } from 'ng2-ui-auth';
import { API_BASE_URL } from '../../shared/constants';
import { ResMsgHandlerS } from '../../shared/services/res-msg-handler.s';
import { IUser, IResetPwData } from '../../shared/interfaces';


@Injectable()
export class AuthS extends NgAuthService {
  constructor(shared: SharedService, local: LocalService, oauth: OauthService,
              private http: JwtHttp, private mh: ResMsgHandlerS) {
    super(shared, local, oauth);
  }

  isEmailTaken(email) {
    return this.http.post(`${API_BASE_URL}/auth/check-email/`, {email}).toPromise()
      .then(res => res.json())
      .catch(err => Promise.reject(this.mh.normalizeErr(err)));
  }

  oSignup(user, opts?: RequestOptionsArgs): Promise<{ token: string, user: IUser }> {
    return super.signup(user, opts).toPromise().then(res => res.json());
  }

  oLogin(user, opts?: RequestOptionsArgs): Promise<{ token: string, user: IUser }> {
    return super.login(user, opts).toPromise().then(res => res.json());
  }

  oLogout() {
    return super.logout().toPromise();
  }

  oAuthenticate(name: string, user?: any) {
    return super.authenticate(name, user).toPromise().then(res => res.json());
  }

  isAuthenticated() {
    return super.isAuthenticated();
  }

  confirmMail(token) {
    return this.http.get(`${API_BASE_URL}/auth/verify-email/${token}`).toPromise()
      .then(res => res.json())
      .catch(err => Promise.reject(this.mh.normalizeErr(err)));
  }

  resendConfirmationMail() {
    return this.http.get(`${API_BASE_URL}/auth/generate-email-verification-token`).toPromise()
      .then(res => res.json())
      .catch(err => Promise.reject(this.mh.normalizeErr(err)));
  }

  forgotPassword(email) {
    return this.http.get(`${API_BASE_URL}/auth/forgot-password/${email}`).toPromise()
      .then(res => res.json())
      .catch(err => Promise.reject(this.mh.normalizeErr(err)));
  }

  resetPw(data: IResetPwData) {
    return this.http.post(`${API_BASE_URL}/auth/reset-password`, data).toPromise().then(res => res.json());
  }

  shareGoogleCalendar() {
    return this.http.get(`${API_BASE_URL}/auth/google/share-calendar`).toPromise().then(res => res.json());
  }

  shareMicrosoftCalendar() {
    return this.http.get(`${API_BASE_URL}/auth/microsoft/share-calendar`).toPromise().then(res => res.json());
  }
}

http.s.ts

import { Injectable } from '@angular/core';
import { Response, RequestOptionsArgs, Request, RequestOptions, ConnectionBackend } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { ConfigService, SharedService, JwtHttp } from 'ng2-ui-auth';

export interface JwtRequestOptionsArgs extends RequestOptionsArgs {
  autoRefreshToken?: boolean;
}

@Injectable()
export class HttpS extends JwtHttp {
  constructor(_backend: ConnectionBackend, _defaultOptions: RequestOptions, _shared: SharedService, _config: ConfigService) {
    // debugger;
    super(_backend, _defaultOptions, _shared, _config);
    console.log(_backend)
    console.log(_defaultOptions)
    console.log(_shared)
    console.log(_config)
  }

  request(url: string | Request, options?: JwtRequestOptionsArgs): Observable<Response> {
    return super.request(url, options);
  }
}

index.ts

// a barrel file, the provider array here will be provided in the main app.m.ts (and not in the shared module, shared module only re-exports existing modules and directives)

import { SocketS } from './socket.s';
import { ResMsgHandlerS } from './res-msg-handler.s';
import { GoogPlacesS } from './goog-places.s';
import { SessionStorageS } from './session-storage.s';
import { LocalStorageS } from './local-storage.s';
import { ScriptLoaderS } from './script-loader.s';
import { StripeS } from './stripe.s';
import { ConnectionBackend, XHRBackend } from '@angular/http';
import { HttpS } from './http.s';
// import { ConfigService, SharedService } from 'ng2-ui-auth';

// BL
import { AuthS } from '../../routes/auth/auth.s';
import { UserS } from '../../routes/user/user.s';
import { UserSt } from '../../routes/user/user.st';

export const services = [
  SocketS,
  ResMsgHandlerS,
  AuthS,
  UserS,
  UserSt,
  GoogPlacesS,
  SessionStorageS,
  LocalStorageS,
  ScriptLoaderS,
  StripeS,
  ConnectionBackend,
  XHRBackend,
  // ConfigService, SharedService,
  HttpS
];

shared.m.th

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, Type } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { sharedDirectives } from './directives/directives';
import { NgPipesModule } from 'angular-pipes';
import { Ng2UiAuthModule } from 'ng2-ui-auth';
import { ToastModule, ToastOptions } from 'ng2-toastr';
import { AuthConfig, BRAND } from './constants';
import { MetadataModule, MetadataLoader, MetadataStaticLoader, PageTitlePositioning } from 'ng2-metadata';
import { MomentModule } from 'angular2-moment';
import { SelectModule } from 'angular2-select';
import { TextMaskModule } from 'angular2-text-mask';

@NgModule({
  declarations: [sharedDirectives],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    JsonpModule,
    NgPipesModule,
    RouterModule,
    NgbModule.forRoot(),
    Ng2UiAuthModule.getWithConfig((AuthConfig as Type<AuthConfig>)),
    ToastModule.forRoot(new ToastOptions({toastLife: 7500, showCloseButton: true})),
    MetadataModule.forRoot({
      provide: MetadataLoader,
      useFactory: () => new MetadataStaticLoader({
        pageTitlePositioning: PageTitlePositioning.PrependPageTitle,
        pageTitleSeparator: ' - ',
        applicationName: BRAND
      })
    }),
    MomentModule,
    SelectModule,
    TextMaskModule
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    JsonpModule,
    NgPipesModule,
    RouterModule,
    NgbModule,
    Ng2UiAuthModule,
    ToastModule,
    MetadataModule,
    MomentModule,
    SelectModule,
    TextMaskModule,
    sharedDirectives
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SharedModule {
}

user.s.ts

import { Injectable } from '@angular/core';
import { JwtHttp } from 'ng2-ui-auth';
import { API_BASE_URL } from '../../shared/constants';
import { ResMsgHandlerS } from '../../shared/services/res-msg-handler.s';
import { HttpS } from '../../shared/services/http.s';

@Injectable()
export class UserS {
  constructor(private http: HttpS, private mh: ResMsgHandlerS) {
  }

  getUser() {
    debugger;
    return this.http.get(`${API_BASE_URL}/user/profile`).toPromise()
      .then(res => res.json())
      .catch(err => Promise.reject(this.mh.normalizeErr(err)));
  }

  setUser(data) {
    return this.http.post(`${API_BASE_URL}/user/profile`, data).toPromise().then(res => res.json());
  }
}