Dependency injection does not load all params

Question

I'm currently trying to create a custom XHRBackend for my angular2 app. I want to catch all http responses with a 401 http response code (unauthorized) to redirect the user on the login-page. But here comes my problem: the DI is not able to load the Router in my custom-backend.

@Injectable()
export class CustomXHRBackend extends XHRBackend {
    constructor(
        _browserXHR: BrowserXhr, 
        _baseResponseOptions: ResponseOptions, 
        _xsrfStrategy: XSRFStrategy,
        private router : Router) {
        super(_browserXHR, _baseResponseOptions, _xsrfStrategy);
        console.log(router); // --> undefined
    }

    createConnection(request: Request) {
        let xhrConnection = super.createConnection(request);
        xhrConnection.response = xhrConnection.response.catch((error, caugth) => {
            if(error.status === 401) {
                //Do stuff with the new router
                this.router.navigate(['/login']);
            }
            return Observable.throw(caugth);
        });
        return xhrConnection;
    }
}

It seems like the DI still uses the metadata of the XHRBackend, because the first 3 params are defined.

---

I created a plunkr, that demonstrates this issue: http://plnkr.co/edit/44imf9KpE06cIyQ395sg?p=preview

Note:

The plunkr is based on the angular2 router example, unfortunately I had not enough time to create a smaller one. The important files are custom.backend.ts and perhaps main.ts.

---

Has someone an idea, why this is happening?

Answer 1

For this, I would extend the Http class instead. Here is a sample:

@Injectable()
export class CustomHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    console.log('request...');
    return super.request(url, options).catch(res => {
      // do something
    });        
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    console.log('get...');
    return super.get(url, options).catch(res => {
      // do something
    });
  }
}

and register it as described below:

bootstrap(AppComponent, [HTTP_PROVIDERS,
    new Provider(Http, {
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
      deps: [XHRBackend, RequestOptions]
  })
]);

Edit

I think you need to provide explicitly parameters using useFactory:

import {provide} from '@angular/core';
import {Router} from '@angular/router';
import { bootstrap }            from '@angular/platform-browser-dynamic';
import { AppComponent }         from './app.component';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import {HTTP_PROVIDERS, Http,RequestOptions, XHRBackend, XSRFStrategy, BrowserXhr} from '@angular/http';
import {CustomXHRBackend} from './custom.backend';

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  provide(XHRBackend, {
    useFactory: (browserXHR: BrowserXhr, requestOptions: RequestOptions, xsrfStrategy: XSRFStrategy, router: Router) => {
      return new CustomXHRBackend(browserXHR, requestOptions, xsrfStrategy, router);
    },
    deps: [BrowserXhr, RequestOptions, XSRFStrategy, Router]
  })
]);

See this plunkr: http://plnkr.co/edit/JK3q5nspZ434AeJJsUeJ?p=preview.