Typescript &引用；错误引用未定义错误事件"；对于NativeScript应用程序

我是一名新的NativeScript学习者。我正在按照Coursera的视频教程使用NativeScript创建一个Android项目，我发现上面的错误是由我代码的这一部分造成的：

处理httpmsg.service.ts

：

import { Injectable } from '@angular/core';

import { throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ProcessHTTPMsgService {

  constructor() { }

  public handleError(error: HttpErrorResponse | any) {
    let errMsg: string;

    if (error.error instanceof ErrorEvent) {
      errMsg = error.error.message;
    } else {
      errMsg = `${error.status} - ${error.statusText || ''} ${error.message}`;
    }

    return throwError(errMsg);
  }
}

dish.services.ts

：

import { Injectable } from '@angular/core';
import { Dish } from '../shared/dish';

import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';
import { ProcessHTTPMsgService } from './process-httpmsg.service';

@Injectable({
  providedIn: 'root'
})
export class DishService {

  constructor(private http: HttpClient,
    private processHTTPMsgService: ProcessHTTPMsgService) { }

  getDishes(): Observable<Dish[]> {
    return this.http.get<Dish[]>(baseURL + 'dishes')
      .pipe(catchError(this.processHTTPMsgService.handleError));
  }

  getDish(id: string): Observable<Dish> {
    return this.http.get<Dish>(baseURL + 'dishes/' + id)
      .pipe(catchError(this.processHTTPMsgService.handleError));
  }

  getFeaturedDish(): Observable<Dish> {
    return this.http.get<Dish[]>(baseURL + 'dishes?featured=true').pipe(map(dishes => dishes[0]))
      .pipe(catchError(this.processHTTPMsgService.handleError));
  }
}

import { Component, OnInit, Inject } from '@angular/core';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';


@Component({
  selector: 'app-menu',
  moduleId: module.id,
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  dishes: Dish[];
  errMess: string;

  constructor(private dishService: DishService,
    @Inject('baseURL') private baseURL) { }

  ngOnInit() {
    this.dishService.getDishes()
      .subscribe(dishes => this.dishes = dishes,
        errmess => this.errMess = <any>errmess);
  }

}

// export const baseURL = "http://localhost:3000/";

export const baseURL = "http://192.168.1.5:3000/";

菜单.component.ts

：

import { Injectable } from '@angular/core';
import { Dish } from '../shared/dish';

import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';
import { ProcessHTTPMsgService } from './process-httpmsg.service';

@Injectable({
  providedIn: 'root'
})
export class DishService {

  constructor(private http: HttpClient,
    private processHTTPMsgService: ProcessHTTPMsgService) { }

  getDishes(): Observable<Dish[]> {
    return this.http.get<Dish[]>(baseURL + 'dishes')
      .pipe(catchError(this.processHTTPMsgService.handleError));
  }

  getDish(id: string): Observable<Dish> {
    return this.http.get<Dish>(baseURL + 'dishes/' + id)
      .pipe(catchError(this.processHTTPMsgService.handleError));
  }

  getFeaturedDish(): Observable<Dish> {
    return this.http.get<Dish[]>(baseURL + 'dishes?featured=true').pipe(map(dishes => dishes[0]))
      .pipe(catchError(this.processHTTPMsgService.handleError));
  }
}

import { Component, OnInit, Inject } from '@angular/core';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';


@Component({
  selector: 'app-menu',
  moduleId: module.id,
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  dishes: Dish[];
  errMess: string;

  constructor(private dishService: DishService,
    @Inject('baseURL') private baseURL) { }

  ngOnInit() {
    this.dishService.getDishes()
      .subscribe(dishes => this.dishes = dishes,
        errmess => this.errMess = <any>errmess);
  }

}

// export const baseURL = "http://localhost:3000/";

export const baseURL = "http://192.168.1.5:3000/";

---

正如我已经提到的，您不能执行

error.error实例of ErrorEvent

，因为

ErrorEvent

是一个接口而不是类。您可以执行HttpErrorResponse的

error.error实例

---

您不能点击

http://localhost:3000

从模拟器/仿真器中，您可以通过计算机的IP访问api，因为它们位于同一网络中，但在技术上不同（模拟）设备。

您的代码中有一些错误/可能的缺点：

正如@Manoj回答的那样，ErrorEvent的

error.error实例应替换为HttpErrorResponse的
error.error实例

您的menu.component.html使用

[src]=“BaseURL+dish.image”>

注入

BaseURL时，它应该是
[src]=“BaseURL+dish.image”>

您可能需要httpClient的nativescript包装器

确保您的

baseURL

服务器允许从可能不安全的源进行连接

如果您为Android构建nativescript应用程序，请检查您的

AndroidManifest.xml

是否允许internet连接。确保设置了以下各项：

---

他的代码直接来自Angular docs，他的问题是

错误。ErrorEvent的error instanceof ErrorEvent

是而不是，即

ErrorEvent

是一个接口而不是一个类。请参见末尾的相关角度文档参考

他的实际问题是

ErrorEvent

是一个Web API，它没有在NativeScript环境中实现。这意味着，如果您在浏览器中运行代码，它将工作得非常好

在NativeScript中，似乎总是返回

HttpErrorResponse

，但如果是客户端或网络问题（通常会返回

ErrorEvent

），它会将

状态设置为“0”，将
状态文本设置为“未知错误”

角度文档：
可能发生两种类型的错误

服务器后端可能会拒绝该请求，返回一个带有状态码（如404或500）的HTTP响应。这些是错误响应

客户端可能会出错，例如网络错误导致请求无法成功完成，或者RxJS操作符中引发异常。这些错误生成JavaScript ErrorEvent对象


private handleError（错误：HttpErrorResponse）{
if（error.error instanceof ErrorEvent）{
//发生客户端或网络错误。请相应地进行处理。
console.error（'发生错误：'，error.error.message）；
}否则{
//后端返回了一个不成功的响应代码。
//回应主体可能包含错误原因的线索。
控制台错误(
`后端返回代码${error.status}，`+
`正文是：${error.error}`）；
}
//返回带有面向用户的错误消息的可观察对象。
回击投手(
“发生了不好的情况；请稍后再试。”）；
}
为什么要检查它是否为ErrorEvent，是否要检查它是否为HttpErrorResponse？这是本教程的代码，我该怎么办？@Manoj：我已经在我的问题中添加了一个新的项目文件。@Manoj：几天后，我明白了你的意思，并更改了代码以查看
HttpErrorResponse
错误，上面写着：
Http失败响应http://localhost...
My
json服务器
正在
http://localhost:3000
当我在浏览器中手动检查路径时，路径也会工作。那么，解决方案是什么呢？我应该在我已将其添加到问题中的
baseURL
文件中写入什么内容。请仔细阅读答案，我已经提到您应该使用IP地址而不是本地主机。我尝试了此操作，但没有成功：
export const baseURL=”http://192.168.1.5:3000/";我也尝试了
http://192.168.1.5:3000
在我的浏览器上，但似乎不起作用！问题是什么？这是直接从angular网站获得的代码<代码>常量消息=（error.error instanceof ErrorEvent）？error.error.message:
服务器返回代码${error.status}，正文为“${error.error}”