title: Unable to see json data in angularjs 2 beta
body: <p>I am using angular js 2 beta to consume a web service.
  My web service is as follows,</p>
  
  <p>This is my browser output when I hit <a href="http://localhost:8080/test" rel="nofollow">http://localhost:8080/test</a></p>
  
  <p>[{"name":"Bhasker"},{"name":"Aaron"}]</p>
  
  <p>Following is my code,</p>
  
  <p>app.component.ts</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {Http, HTTP_PROVIDERS} from 'angular2/http';
  import 'rxjs/add/operator/map'
  
  @Component({
      selector: 'my-app',
      viewProviders: [HTTP_PROVIDERS],
      template: `&lt;h1&gt;My First Angular 2&lt;/h1&gt;           
       &lt;div&gt;
        &lt;h1&gt;People&lt;/h1&gt;
        &lt;ul&gt;
          &lt;li *ngFor="#person of people"&gt;
            {{person.name}}
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;`
  })
  export class AppComponent {
      people: Object[];
      constructor(http: Http) {
          //working with plain json file but not with ws
          http.get('http://localhost:8080/test')
              .map(res =&gt; res.json())
              .subscribe(people =&gt; this.people = people);
      }
  }
  </code></pre>
  
  <p>boot.ts</p>
  
  <pre><code>import {bootstrap}    from 'angular2/platform/browser'
  import {AppComponent} from './app.component'
  
  bootstrap(AppComponent);
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;html&gt;
  
    &lt;head&gt;
      &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
  
      &lt;!-- 1. Load libraries --&gt;
      &lt;script src="node_modules/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
      &lt;script src="node_modules/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"&gt;&lt;/script&gt;
  
      &lt;!-- 2. Configure SystemJS --&gt;
      &lt;script&gt;
        System.config({
          packages: {        
            app: {
              format: 'register',
              defaultExtension: 'js'
            }
          }
        });
        System.import('app/boot')
              .then(null, console.error.bind(console));
      &lt;/script&gt;
  
    &lt;/head&gt;
  
    &lt;!-- 3. Display the application --&gt;
    &lt;body&gt;
      &lt;my-app&gt;Loading...&lt;/my-app&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I get the following in my browser's console,</p>
  
  <pre><code>The connection to ws://localhost:3000/browser-sync/socket.io/?EIO=3&amp;transport=websocket&amp;sid=WJv1vqSBu7HYFxTmAAAA was interrupted while the page was loading. browser-sync-client.2.11.1.js:3:0
  ReferenceError: require is not defined http.js:7:5
  Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. angular2.dev.js:351:5
  EXCEPTION: [object Object] angular2.dev.js:23524
  EXCEPTION: [object Object] angular2.dev.js:23514:9
  
  STACKTRACE: angular2.dev.js:23514:9
  
  
  
  -----async gap-----
  _getStacktraceWithUncaughtError@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26
  [2]&lt;/&lt;/module.exports.$fork/&lt;@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40
  [2]&lt;/&lt;/Zone.prototype.bind@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:109:43
  patchEventTargetMethods/obj.addEventListener@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1089:1
  XHRConnection/this.response&lt;@https://code.angularjs.org/2.0.0-beta.0/http.dev.js:674:9
  </code></pre>
  
  <p>my spring web service ,</p>
  
  <pre><code>@RequestMapping(value = { "/test" },method = RequestMethod.GET,headers="Accept=application/json")
  public  List&lt;People&gt; testSetvice(){
      System.out.println("hello");
      List&lt;People&gt; li=new ArrayList&lt;&gt;();
      li.add(new People("Bhasker"));
      li.add(new People("Aaron"));
      return li;
  
  }
  </code></pre>
  
  <p>However if I change <a href="http://localhost:8080/test" rel="nofollow">http://localhost:8080/test</a> to people.json which is a local file it works.</p>
  
  <p>Thanks</p>