Property JSON does not exist on type Object

Question

I'm trying to read a JSON configuration file like this

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);
});

But res.json() shows as error

I'm importing these classes

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

Could you please suggest what I did wrong?

Mine is angular 9

Is this post what you need ? https://stackoverflow.com/questions/46630893/angular-res-json-is-not-a-function — Alexis, Sep 02 '20 at 12:13

ruth · Answer 1 · 2020-09-02T12:20:08.767

I believe you're coming from an older version of Angular/RxJS. In the newer versions, the default responseType is json. So res.json() isn't required anymore.

Try the following

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

Also you don't need individual pipe() for each RxJS operator. You could include all the operators in a single 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(
  ...
);

There is also now a RxJS throwError function instead of Observable.throw.

MoxxiManagarm · Answer 2 · 2020-09-02T14:00:14.633

1

Instead of using http to retrieve the json you could also set your compilerOptions to

    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true

And import the json in your ts file

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

You can then access it like constant (synchronous), no need for asset or asynchronous http call.

Edit:

As you requested, here how it would look like

First your import (the correct path should differ on your side)

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

Then you can use it so:

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

Please still keep in mind that those compilerOptions are not enabled by default and are required to do this approach.

Please refer to the working stackblitz: https://stackblitz.com/edit/angular-ivy-umoflb?file=src/app/app.component.ts (Also check the tsconfig.ts file for the compilerOptions added)

edited Sep 02 '20 at 14:00

answered Sep 02 '20 at 12:17

MoxxiManagarm

8,735
3
14
43

Could you please explain little more how to access the properties from JSON config file if I import like this? – Sandeep Thomas Sep 02 '20 at 13:47
When I try this Im getting an error Cannot find module '../../assets/env/conf.json'. Consider using '--resolveJsonModule' to import module with '.json' extension – Sandeep Thomas Sep 02 '20 at 13:55
Yes, this is exactly what was first mentioned in my answer. You need this compilerOption enabled. – MoxxiManagarm Sep 02 '20 at 13:59
That is I enabled in tsconfig.json. "resolveJsonModule": true, "allowSyntheticDefaultImports": true, – Sandeep Thomas Sep 02 '20 at 14:01
Maybe you have another tsconfig file in your project which overrides the config? I added a stackblitz. – MoxxiManagarm Sep 02 '20 at 14:02
Yeah VSCode can have lazy times. – MoxxiManagarm Sep 02 '20 at 14:05
Thanks a lot. Restarting VS Code fixed that error.. Awesome!! – Sandeep Thomas Sep 02 '20 at 14:09
Sorry one more question.. When we build the app for production, if my path is like ../../assets/env/env.json does that cause any issue?? I mean relative path issue? – Sandeep Thomas Sep 02 '20 at 14:13
Not that I am aware of – MoxxiManagarm Sep 02 '20 at 14:23

Property JSON does not exist on type Object

2 Answers2