angular6版本的项目启动后,发请求就报错?

后台管理系统启动正常,在登录页面点登录就报错(本人是熟悉vue,他这请求库不是axios也不是fetch):

import { Http } from '@angular/http';

// 报错信息:
app.service.ts:145 ERROR Error: Uncaught (in promise): TypeError: rxjs__WEBPACK_IMPORTED_MODULE_2__.Observable.throw is not a function
TypeError: rxjs__WEBPACK_IMPORTED_MODULE_2__.Observable.throw is not a function
    at CatchSubscriber.selector (http.service.ts:38:30)

image.png

接口单独拿工具(postman或apifox等)测是正常的,也就是后端无问题也不是跨域问题。
初步判断是这个项目包版本的问题。我也不能大改不敢升级最新版,太多包是8年前的了。只能小改,如何改

  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@antv/data-set": "^0.8.9",
    "@antv/g2": "^3.5.7",
    "core-js": "^2.5.4",
    "essence-ng2-print": "^1.1.0",
    "ng-zorro-antd": "^1.6.0",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26",
    "tinymce": "^5.0.2",
    "@tinymce/tinymce-angular": "^3.0.0"
  },

image.png

// app.service.ts 代码头如下:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { ActivatedRoute, Router } from '@angular/router';
//表单 绑定规则、控件组、响应式表单验证(驱动式表单验证)
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
//消息提示
import { NzMessageService, NzModalService } from 'ng-zorro-antd';

@Injectable()
export class AppService {
// http.service.ts 文件如下:
import { Injectable } from '@angular/core';
import { Http, Request, RequestOptionsArgs, Response, RequestOptions, ConnectionBackend, Headers } from '@angular/http';
import { Observable } from 'rxjs';

import { map, catchError } from 'rxjs/operators';
@Injectable()
export class HttpService extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }
  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    //根据不同的生产环境配置http前缀
    typeof url == 'string' ? url : url.url;
    return this.intercept(super.request(url, options));
  }
  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return this.intercept(super.get(url, options)).pipe(map(res => res.json()));
  }
  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
    return this.intercept(super.post(url, body, this.getRequestOptionArgs(options))).pipe(map(res => res.json()));
  }
  put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
    return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
  }
  delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return this.intercept(super.put(url, this.getRequestOptionArgs(options)));
  }
  getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
    options = options == null ? new RequestOptions() : options;
    options.headers = options.headers == null ? new Headers() : options.headers;
    let token = localStorage.getItem('token');
    options.headers.append('Content-Type', 'text/plain;charset=UTF-8');
    options.headers.set('token', token);
    return options;
  }
  intercept(observable: Observable<Response>): Observable<Response> {
    return observable.pipe(catchError((err, source) => {
      return Observable.throw(err);
    }));
  }

}
阅读 423
2 个回答
  1. 跨域问题,Angular 项目也可以设置代理的
  2. 根据报错信息查看 app.service.ts 这个文件,大概率是 rxjs 的导入问题

这个老项目前后端是不分离的,所以前后端他们都没设置过跨域。今天后端解决跨域后。双方重启又不存在上述问题了:“Observable.throw is not a function”

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏