0

I am using angular4. Here is the dependency list in package.json

"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",

I am intercepting http request so I have extended the Http class. Now I need add entery in provider for this, So in app.module.ts

providers: [{
  provide: HttpInterceptor,
  useFactory: httpInterceptor,
  deps: [XHRBackend, RequestOptions]
}],

httpInterceptor is an exported function 

// to return an instance of HttpInterceptor class
export function httpInterceptor(backend: XHRBackend, defaultOptions: RequestOptions) {
    return new HttpInterceptor(backend, defaultOptions);
}

Now this is the constructor of HttpInterceptor class

constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
     super(backend, defaultOptions);
     this.router = ServiceLocator.injector.get(Router);
}

I can't inject Router service directly in the constructor so I have followed this answer to inject service manually. But this is showing this.router undefined. When I debug this it is showing ServiceLocator.injector

{
   message:"__WEBPACK_IMPORTED_MODULE_5__common_services_locator_service__ is not defined"
   stack : "ReferenceError: __WEBPACK_IMPORTED_MODULE_5__common_services_locator_service__ is not defined
    at eval (eval at webpackJsonp.../../../../../src/app/interceptors/http-interceptor.ts.HttpInterceptor.onCatch (http://localhost:7000/main.bundle.js:568:13), <anonymous>:1:1)
    at CatchSubscriber.webpackJsonp.../../../../../src/app/interceptors/http-interceptor.ts.HttpInterceptor.onCatch [as selector] (http://localhost:7000/main.bundle.js:568:13)
    at CatchSubscriber.webpackJsonp.../../../../rxjs/operators/catchError.js.CatchSubscriber.error (http://localhost:7000/vendor.bundle.js:18245:31)
    at XMLHttpRequest.onLoad (http://localhost:7000/vendor.bundle.js:84658:34)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:7000/polyfills.bundle.js:2970:31)
    at Object.onInvokeTask (http://localhost:7000/vendor.bundle.js:66251:33)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:7000/polyfills.bundle.js:2969:36)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (http://localhost:7000/polyfills.bundle.js:2737:47)
    at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:7000/polyfills.bundle.js:3044:34)
    at invokeTask (http://localhost:7000/polyfills.bundle.js:4085:14)"
}
Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
  • 1
    *I am intercepting http request so I have extended the Http*: no. You should forget about the deprecated Http class, and use HttpClient instead, which has support for interceptors. https://angular.io/guide/http#intercepting-all-requests-or-responses – JB Nizet Nov 13 '17 at 07:04
  • 1
    @JBNizet is correct here. Don't make this harder for you than it has to be. You can progressively refactor the code to use both `Http` (which doesn't have interceptor support) and `HttpClient` (which has interceptor support). – delasteve Nov 14 '17 at 03:35

0 Answers0