类型 Object 上不存在属性 JSON

Question

我正在尝试读取这样的 JSON 配置文件

this.http.get('assets/env/env.json').pipe(map( res => res.json())).pipe(catchError((error: any): any => {
  console.log('Configuration file "env.json" could not be read');
  
  return Observable.throw(error.json().error || 'Server error');
})).subscribe( (envResponse) => {
  endpoint="conf-" + envResponse.env + ".json";
  alert(endpoint);
});

但是 res.json() 显示为错误

我正在导入这些类

import { Injectable } from '@angular/core';
import { HttpClient, HttpBackend } from '@angular/common/http';
import { map, catchError } from 'rxjs/operators';
import { Observable } from 'rxjs';

你能指出我做错了什么吗？

我的是 9 角

Answer 1

我相信您来自旧版本的 Angular/RxJS。在较新的版本中，默认的responseType 是json。所以res.json() 不再需要了。

试试下面的

this.http.get('assets/env/env.json').pipe(
  catchError((error: any): any => {...})
).subscribe(
  ...
);

此外，您不需要为每个 RxJS 运算符单独使用 pipe()。您可以将所有运算符包含在一个管道中。

this.http.get('assets/env/env.json').pipe(
  map(res => {
    // transform and return the value
  }),
  tap(res => {
    // perform some side-effects
  }),
  catchError((error: any): any => {
    console.log('Configuration file "env.json" could not be read');
    return throwError(error.error || 'Server error');
  })
).subscribe(
  ...
);

现在还有一个 RxJS throwError 函数而不是 Observable.throw。

Answer 2

您也可以将您的 compilerOptions 设置为

，而不是使用 http 来检索 json

    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true

并在你的 ts 文件中导入 json

import myJson from './path-to-json/my-json.json';

然后您可以像常量（同步）一样访问它，无需资产或异步 http 调用。

---

编辑：

按照您的要求，这里会是什么样子

首先你的导入（正确的路径应该不同）

import envJson from '../env/env.json';

那么你可以这样使用它：

  endpoint = "conf-" + envJson.env + ".json";

请记住，这些 compilerOptions 默认情况下未启用，并且是执行此方法所必需的。

---

请参考工作中的stackblitz：https://stackblitz.com/edit/angular-ivy-umoflb?file=src/app/app.component.ts （还要检查 tsconfig.ts 文件中添加的 compilerOptions）