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

Question

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)

I believe you will need to reference Http when bootstrapping.... bootstrap(MyComponent, [Http]); — Brocco
– Brocco, Commented Sep 29, 2015 at 18:03
You should update your systemjs to the latest version 0.18.* and remove es6-module-loader. Besides that, base your config in some working set up like this one — Eric Martinez
– Eric Martinez, Commented Sep 29, 2015 at 19:56
Thanks, Eric for the helpful response. I updated systemjs and threw away es6-module-loader. I also added 'defaultJSExtensions: true' to the config parameters. I am not getting any error anymore. :) — Johnny
– Johnny, Commented Sep 30, 2015 at 17:54

Community · Accepted Answer · 2017-05-23 12:02:08Z

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 :

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' .

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

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.

You still have HTTP_BINDINGS in the code example change with: ...

reda igbaria · Accepted Answer · 2015-12-22 11:46:16Z

0

you need to bootstrap the [HTTP_BINDINGS]

change this line :

bootstrap(MyComponent);

to this :

bootstrap(MyComponent,[HTTP_BINDINGS]);

answered Dec 22, 2015 at 11:46

reda igbaria

1,45412 silver badges15 bronze badges

1 Comment

Pardeep Jain Over a year ago

PS: but now as in the beta HTTP_BINDINGS is changed to HTTP_PROVIDERS .

Vijay Gajera · Accepted Answer · 2017-07-09 06:23:12Z

0

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

answered Jul 9, 2017 at 6:23

Vijay Gajera

1,37411 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Updated to angular2 Beta

Get JSON file using HTTP .

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Updated to angular2 Beta

Get JSON file using HTTP .

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related