CODEWITHSUNDEEP
typescriptangular
Johnny
Johnny

Reputation: 121

How to get a json file in Angular 2 using the Http class?

I am trying to get a json file using the Http class in Angular 2. I followed the example on the Angular 2 homepage: https://angular.io/docs/js/latest/api/http/Http-class.html. However, I am getting the error message below. I am using Angular 2.0.0-alpha.37, traceur 0.0.91, systemjs 0.16.11, es6-module-loader 0.16.6 and typescript 1.6.2. Any ideas on what might be wrong here?

app.ts

///<reference path="typings/angular2/angular2.d.ts"/>
///<reference path="typings/angular2/http.d.ts"/>
import {Component, View, bootstrap} from 'angular2/angular2';
import {Http, HTTP_BINDINGS} from 'angular2/http';

@Component({
  selector: 'myApp',
  viewBindings: [HTTP_BINDINGS]
})
@View({
  templateUrl: 'myapp.html'
})
class MyComponent {
  data: Object;
  constructor(http: Http) {
    http.get('data.json').toRx().map(res => res.json()).subscribe(data => this.data = data);
  }
}
bootstrap(MyComponent);

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="../node_modules/angular2/bundles/http.dev.js"></script>
    <script src="../node_modules/traceur/bin/traceur-runtime.js"></script>
    <script src="../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
  </head>
  <body>
    <myApp></myApp>
    <script>
      System.import('app');
    </script>
  </body>
</html>

Result

EXCEPTION: Error during instantiation of MyComponent!.
EXCEPTION: Error during instantiation of MyComponent!.
ORIGINAL EXCEPTION: TypeError: Rx.Subject is not a function
ORIGINAL STACKTRACE:
TypeError: Rx.Subject is not a function
    at new EventEmitter (angular2.dev.js:22672)
    at new XHRConnection (http.dev.js:7474)
    at XHRBackend.createConnection (http.dev.js:7519)
    at httpRequest (http.dev.js:7291)
    at Http.get (http.dev.js:7369)
    at new MyComponent (:8080/src/app.js:19)
    at angular2.dev.js:8937
    at Injector._proto._instantiate (angular2.dev.js:28045)
    at Injector._proto._new (angular2.dev.js:27985)
    at InjectorInlineStrategy.protoStrategy.instantiateBinding (angular2.dev.js:27774)
ERROR CONTEXT:
_Context
EXCEPTION: TypeError: Cannot read property 'location' of undefined
EXCEPTION: TypeError: Cannot read property 'location' of undefined
STACKTRACE:
TypeError: Cannot read property 'location' of undefined
    at angular2.dev.js:27298
    at Zone.run (angular2.dev.js:136)
    at Zone.run (angular2.dev.js:16593)
    at zoneBoundFn (angular2.dev.js:109)
    at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1419)
    at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1431)
    at lib$es6$promise$$internal$$publish (angular2.dev.js:1402)
    at angular2.dev.js:187
    at microtask (angular2.dev.js:16619)
    at Zone.run (angular2.dev.js:136)
EXCEPTION: TypeError: Cannot read property 'hostView' of undefined
EXCEPTION: TypeError: Cannot read property 'hostView' of undefined
STACKTRACE:
TypeError: Cannot read property 'hostView' of undefined
    at zone.run.tick (angular2.dev.js:27331)
    at Zone.run (angular2.dev.js:136)
    at Zone.run (angular2.dev.js:16593)
    at zoneBoundFn (angular2.dev.js:109)
    at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1419)
    at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1431)
    at lib$es6$promise$$internal$$publish (angular2.dev.js:1402)
    at angular2.dev.js:187
    at microtask (angular2.dev.js:16619)
    at Zone.run (angular2.dev.js:136)

Upvotes: 8

Views: 46548

Answers (3)

Vijay Gajera
Vijay Gajera

Reputation: 1364

If you want to read .json file using http get method in angular 2 its depend on you using build tools.

Like if you using angular-cli then you need to put .json file inside assets folder and try to read that file like

http.get('<your file path inside assets folder>.json')

But if you using webpack then you need to put that same .json file inside public folder 

http.get('<your file path inside assets folder>.json')

It will work

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86730

Updated to angular2 Beta

As of Angular2 is in beta now so i feel to answer this question with some changes according to angular2 beta. so here is the list of some changes which is must to follow :

  1. Imports of angular2

this 

import {Component, View, bootstrap} from 'angular2/angular2';
import {Http, HTTP_BINDINGS} from 'angular2/http';

should be changed to:

import {Component, View} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {bootstrap} from 'angular2/platform/browser';

for more information regarding imports see here List of all imports in angular2 as of beta.

Cannot find module 'angular2/angular2' .

  1. viewBindings: [HTTP_BINDINGS] :- HTTP_BINDINGS is changed to HTTP_PROVIDERS. It would be better if we provide all basic binding at the time of bootstraping our app.like this

    bootstrap(MyComponent,[HTTP_PROVIDERS]);

  2. No need to provide extra @View annotation while all the functionality provided by @Component itself. ignore this:

@View({
    templateUrl: 'myapp.html'
  })

use this:

  @Component({
    selector: 'myApp',
    templateUrl: 'myapp.html'
  })

  1. Get JSON file using HTTP .

    Firstly as we all know Angular2 is throw observable object instead of promise like in angular 1.x. so to handle Observable Object we need RxJs methods i.e .map and .subscribe . .map method accepts Observable object and transform into our desired form like text(), Json() as per need read out here https://angular.io/docs/js/latest/api/http/Response-class.html . 
  class MyComponent {
  data: Object;
    constructor(private http: Http) {
      http.get('data.json')
        .map(res => res.json())
        .subscribe(data => this.data = data,
                    err => console.log(err),
                    () => console.log('Completed'));
    }
  }

for More Information regarding HTTP service in Angular2 read out these answers too.

 

Upvotes: 8

reda igbaria
reda igbaria

Reputation: 1454

you need to bootstrap the [HTTP_BINDINGS]

change this line : 

bootstrap(MyComponent);

to this : 

bootstrap(MyComponent,[HTTP_BINDINGS]);

Upvotes: 0

Related Questions