javascript - 从 Angular 4 升级到 7 会导致一些问题

Question

嘿，我已将我的项目从 Angular 4 升级到 Angular 7，并且某些服务、模块已弃用。 这是我的 app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SharedModule,
    HttpClientModule,
    AppRoutingModule,
    NgbModule.forRoot(),
    StoreModule.forRoot({})
  ],
  providers: [
    SessionTimeoutService,
    SpinnerService,
    {
      provide: HttpClient,
      useFactory: httpFactory,
      deps: [XHRBackend, RequestOptions, Store, SpinnerService]
    },
    UtilService,
    { provide: NgbDateParserFormatter, useClass: DateParserFormatter }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    ServiceLocatorService.injector = this.injector;
  }
}

现在 XHRBackend、RequestOptions 现已弃用并给我错误 有人可以告诉我如何解决吗？

这是我的 Http 拦截器文件

@Injectable()
export class InterceptedHttp extends HttpClient {
  constructor(
    backend: HttpBackend,
    defaultOptions: RequestOptions,
    private store: Store<any>,
    private spinnerService: SpinnerService
  ) {
    super(backend, defaultOptions);
  }

  request(
    url: string | HttpRequest,
    options?: RequestOptionsArgs
  ): Observable<HttpResponse> {
    this.showLoader();
    return this.tryCatch(super.request(url, options)).finally(() => {
      this.hideLoader();
    });
  }

  get(url: string, options?: RequestOptionsArgs): Observable<HttpResponse> {
    url = this.updateUrl(url);
    return this.tryCatch(super.get(url, this.getRequestOptionArgs(options)));
  }

  post(
    url: string,
    body: string,
    options?: RequestOptionsArgs
  ): Observable<HttpResponse> {
    url = this.updateUrl(url);
    return this.tryCatch(
      super.post(url, body, this.getRequestOptionArgs(options))
    );
  }

  put(
    url: string,
    body: string,
    options?: RequestOptionsArgs
  ): Observable<HttpResponse> {
    url = this.updateUrl(url);
    return this.tryCatch(
      super.put(url, body, this.getRequestOptionArgs(options))
    );
  }

  delete(url: string, options?: RequestOptionsArgs): Observable<HttpResponse> {
    url = this.updateUrl(url);
    return this.tryCatch(super.delete(url, this.getRequestOptionArgs(options)));
  }

  patch(
    url: string,
    body: any,
    options?: RequestOptionsArgs
  ): Observable<HttpResponse> {
    url = this.updateUrl(url);
    return this.tryCatch(
      super.patch(url, body, this.getRequestOptionArgs(options))
    );
  }

  private updateUrl(req: string) {
    return environment.origin + req;
  }

  private getRequestOptionArgs(
    options?: RequestOptionsArgs
  ): RequestOptionsArgs {
    if (options == null) {
      options = new RequestOptions();
    }
    if (options.headers == null) {
      options.headers = new HttpHeaders();
    }
    options.headers.append("Content-Type", "application/json");
    options.headers.append(
      "Authorization",
      ` Bearer ${sessionStorage.AccessToken}`
    );

    return options;
  }
}

我收到错误 请求选项， 请求选项参数， 这些现在已被弃用，我收到错误如何解决？

Answer 1

您必须使用来自 @angular/common/http 的新包 喜欢

import { HttpClientModule } from "@angular/common/http";
import { HttpClient } from "@angular/common/http";

因此，大多数情况下，您将使用 HttpHeaders 来构建 ajax header ，例如 params formdata 等...

Headers -> HttpHeaders

Response -> HttpResponse

RequestOptions, RequestOptionsArgs are remove and you have to use HttpParams

请阅读新的更改日志 here