439
439

Reputation: 810

Error occuring while reading json file in angular2

I am trying to read config.json file in my angular2 service like below-

load() {
    return new Promise((resolve, reject) => {
        this.http.get('./config.json')
            .map(res => res.json())
            .subscribe((env_data) => {
                console.log('env_data: ' + env_data);
                this._env = env_data;
                });
}

This is basically contains list of key and value pairs of application configuration settings. The structure of my config.json file like this-

{
  "env": "development"
}

But, on calling load method of angular2 service, I am receiving below error-

core.umd.js:3462 EXCEPTION: Unexpected token < in JSON at position 0ErrorHandler.handleError @ core.umd.js:3462next @ core.umd.js:6924schedulerFn @ core.umd.js:6172SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:6164onError @ core.umd.js:6388onHandleError @ core.umd.js:6263ZoneDelegate.handleError @ zone.js:236Zone.runTask @ zone.js:157ZoneTask.invoke @ zone.js:335
core.umd.js:3467 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:3467next @ core.umd.js:6924schedulerFn @ core.umd.js:6172SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:6164onError @ core.umd.js:6388onHandleError @ core.umd.js:6263ZoneDelegate.handleError @ zone.js:236Zone.runTask @ zone.js:157ZoneTask.invoke @ zone.js:335
core.umd.js:3468 SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Function.Json.parse (http.umd.js:188)
    at Response.Body.json (http.umd.js:1166)
    at MapSubscriber.eval [as project] (config.service.ts:18)
    at MapSubscriber._next (map.ts:79)
    at MapSubscriber.Subscriber.next (Subscriber.ts:95)
    at XMLHttpRequest.onLoad (http.umd.js:1497)
    at ZoneDelegate.invokeTask (zone.js:265)
    at Object.onInvokeTask (core.umd.js:6233)
    at ZoneDelegate.invokeTask (zone.js:264)ErrorHandler.handleError @ core.umd.js:3468next @ core.umd.js:6924schedulerFn @ core.umd.js:6172SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:6164onError @ core.umd.js:6388onHandleError @ core.umd.js:6263ZoneDelegate.handleError @ zone.js:236Zone.runTask @ zone.js:157ZoneTask.invoke @ zone.js:335
Subscriber.ts:241 Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Function.Json.parse (http://localhost:61007/js/@angular/http/bundles/http.umd.js:188:58)
    at Response.Body.json (http://localhost:61007/js/@angular/http/bundles/http.umd.js:1166:29)
    at MapSubscriber.eval [as project] (http://localhost:61007/app/Shared/Config/config.service.js:22:50)
    at MapSubscriber._next (http://localhost:61007/js/rxjs/operator/map.js:77:35)
    at MapSubscriber.Subscriber.next (http://localhost:61007/js/rxjs/Subscriber.js:89:18)
    at XMLHttpRequest.onLoad (http://localhost:61007/js/@angular/http/bundles/http.umd.js:1497:42)
    at ZoneDelegate.invokeTask (http://localhost:61007/js/zone.js:265:35)
    at Object.onInvokeTask (http://localhost:61007/js/@angular/core/bundles/core.umd.js:6233:41)
    at ZoneDelegate.invokeTask (http://localhost:61007/js/zone.js:264:40)

Please suggest me how to avoid this error and reading key value pairs from json file.

I am using Angular2 Final 2.0.0 with VS2015 IDE.

Upvotes: 0

Views: 561

Answers (1)

chimmi
chimmi

Reputation: 2085

Check you network pannel that you actually recieve your JSON, because

Unexpected token < in JSON at position 0

Hints that response is a HTML page, probably 404 stub.

Upvotes: 1

Related Questions