Angular 4 Http攔截器，在“ ng serve”時出現錯誤

Question

ERROR中的ERROR遇到靜態解析符號值的錯誤。 不支持函數調用。 考慮使用對導出函數的引用（原始.ts文件中的位置69:19）替換該函數或lambda，在/src/app/app.module.ts中解析符號AppModule

HttpService.js

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

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class HttpService extends Http {
   constructor(backend: XHRBackend, options: RequestOptions) {
    let token = localStorage.user_token; // your custom token getter function here
    options.headers.set('token', `${token}`);
    super(backend, options);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    let token =  localStorage.user_token;
    if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
      if (!options) {
        // let's make option object
        options = {headers: new Headers()};
      }
      options.headers.set('token', `${token}`);
    } else {
      // we have to add the token to the url object
      url.headers.set('token', `${token}`);
    }
    return super.request(url, options).catch(this.catchAuthError(this));
  }

  private catchAuthError(self: HttpService) {
    // we have to pass HttpService's own instance here as `self`
    return (res: Response) => {
      console.log(res);
      if (res.status === 401 || res.status === 403) {
        // if not authenticated
        console.log(res);
      }
      return Observable.throw(res);
    };
  }
}

app.module.js

providers: [
    {
      provide: HttpService,
      useFactory: (backend: XHRBackend, options: RequestOptions) => {
        return new HttpService(backend, options);
      },
      deps: [XHRBackend, RequestOptions]
    },
    UserService,CookieService,ProductService,ConfirmationService,AuthGaurdService,

  ]

Answer 1

由於錯誤狀態， 請考慮使用對導出函數的引用替換lambda，例如：

export function httpServiceFactory(backend: XHRBackend, options: RequestOptions) {
  return new HttpService(backend, options);
}

現在您的提供者應如下所示：

{
  provide: HttpService,
  useFactory: httpServiceFactory,
  deps: [XHRBackend, RequestOptions]
},