【问题标题】:error TS2304: Cannot find name 'Observable' Angularjs 2错误 TS2304:找不到名称 'Observable' Angularjs 2
【发布时间】:2020-07-01 13:07:05
【问题描述】:

当我切换到我的 Linux PC 时,我收到如下错误:

app/app.module.ts(21,67): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(25,53): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(29,68): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(33,67): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(37,56): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(52,27): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(52,50): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(54,40): error TS2304: Cannot find name '_'.
app/app.module.ts(56,24): error TS2304: Cannot find name 'Observable'.
app/app.module.ts(58,24): error TS2304: Cannot find name 'Observable'.

有人知道解决办法吗?

此外,我的编辑器在 HttpIntreceptor 类上显示错误,当我删除它时它工作正常......

这部分标注:Observable<Response>

你能检查一下吗:

class HttpInterceptor extends Http {

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _router: Router) {
        super(backend, defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.request(url, options));
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return this.intercept(super.get(url,options));
    }

    post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {   
        return super.post(url, body);
    }

    put(url: string, body: string, 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.delete(url, options));
    }

    getRequestOptionArgs(options?: RequestOptionsArgs) : RequestOptionsArgs {
        if (options == null) {
            options = new RequestOptions();
        }
        if (options.headers == null) {
            options.headers = new Headers();
        }
        options.headers.append('Content-Type', 'application/json');
        return options;
    }

    intercept(observable: Observable<Response>): Observable<Response> {
        return observable.catch((err, source) => {
            if (err.status  == 401 && !_.endsWith(err.url, 'api/auth/login')) {

                return Observable.empty();
            } else {
                return Observable.throw(err);
            }
        });

    }
}

【问题讨论】:

  • 这个范围很广,也许添加您收到错误的组件。
  • 看起来它是 Inerceptor 的问题,你能检查一下代码吗,主要帖子更新了...我是打字稿的新手,所以我不确定问题出在哪里...
  • 是的,你是对的尝试挖掘 http 文档 angular.io/docs/ts/latest/api/http/index/Http-class.html 它看起来拦截器已经过时并且不再可用。我在 http 类定义中没有看到它
  • 你导入了 Rxjs - import 'rxjs/Rx'; 吗?
  • 是的,这是我现在才发现的问题...import {Observable} from 'rxjs/Rx'; import 'rxjs/add/operator/map';

标签: angular typescript


【解决方案1】:

我通过导入 Observable 解决了同样的问题

import {Observable} from 'rxjs/Rx';

【讨论】:

  • 它是说 node_modules/rxjs/Rx"' 没有导出的成员 'Observable'。
  • 现在它改变了。不是 import { Observable } from "rxjs/Observable";
【解决方案2】:

您可以通过两种方式做到这一点

1. 导入Observable,然后导入其他函数,如map、do、catch、throw,随你使用

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
.....
.....
import 'rxjs/add/observable/throw';

2。导入整个 Rxjs

import {Observable} from 'rxjs/Rx';

import {Observable} from 'rxjs';

建议使用第一种方法,因为不需要导入整个 rxjs,并且会将所有子模块包含到包中,影响包大小和加载时间

【讨论】:

  • 在 Angular 5 中,我使用了选项 1 来解决这个问题。它正在工作。
  • 在 Angular 8 中,您可以使用 import {Observable} from 'rxjs'; 但不能使用 import {Observable} from 'rxjs/Observable';import {Observable} from 'rxjs/Rx';
【解决方案3】:

所有解决方案都不起作用,我不得不使用

import { Observable } from 'rxjs';

【讨论】:

    【解决方案4】:

    而不是使用

    import 'rxjs/add/operator/map';
    this.obObservable().map(data => {})
    

    使用

    import { map } from "rxjs/operators";
    this.obObservable().pipe(map(data => {}))
    

    角度最近改变了它

    【讨论】:

      猜你喜欢
      • 2016-12-18
      • 2019-05-06
      • 2019-08-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-12-31
      相关资源
      最近更新 更多