Question

这是我的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Learn AngularJS2 </title>
    <meta charset="utf-8">
    <!-- bootstrap -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- fonts -->
    <link href='https://fonts.googleapis.com/css?family=Lato:700,400,100,200,300' rel='stylesheet' type='text/css'>
    <!-- css link -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Source files -->
    <script src="js/lib/angular2/es6-shim.min.js"></script>
    <script src="js/lib/angular2/system-polyfills.js"></script>

    <script src="js/lib/angular2/angular2-polyfills.js"></script>
    <script src="js/lib/angular2/system.src.js"></script>
    <script src="js/lib/angular2/Rx.js"></script>
    <script src="js/lib/angular2/angular2.dev.js"></script>

    <script src='https://code.angularjs.org/2.0.0-beta.0/http.dev.js'></script>


    <!-- config -->

    <script>
      System.config({
        packages: {
          js: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('js/boot')
        .then(null, console.error.bind(console));
    </script>
  </head>
  <!-- Body -->
<body>
<div class="container">

  <httptest>Loading...</httptest>

</div>
</body>
</html>

这是http组件

import {Component} from 'angular2/core';
import {httpService} from './http_service';

@Component({
  selector: 'httptest',
  template:`
    <button (click)="onGet()">getData</button>
    <p>Output : {{getData}}</p>
    `,
    providers:[httpService]
})


export class httpComp{

    getData:string;
    constructor(
    private httpService:httpService){}
    onGet(){
    this.httpService.getData()
    .subscribe(
        data => this.getData=JSON.stringfy(data),
        error => alert(error),
        () => console.log("finish")
    );
    }

} 这是我的http服务

import {Injectable} from '@angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/add/operator/map';


@Injectable()

export class httpService{
constructor (private _http:Http){
    getData(){
        return 
this._http.get('http://localhost:3000/blahblah')
        .map(res => res.json())
        }

    }

    }

即boot.ts

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';

import {httpComp} from './http.component';

bootstrap(httpComp);

当我跑步时我遇到了这些错误

system.src.js：1049 GET http://localhost:8000/@angular2/core 404（未找到）而这个错误

angular2-polyfills.js：138错误：XHR错误（404 Not Found）loading http://localhost:8000/@angular2/core（...）

Answer 1

@angular/core符号来自2.0.0.rc.0中的版本beta，而alpha的导入类似于angular2/core。你混淆了你的进口。

来源：https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc0-2016-05-02

import {Component} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {httpService} from './http_service';


@Component({
  selector: 'httptest',
  template:`
    <button (click)="onGet()">getData</button>
    <p>Output : {{getData}}</p>
    `,
    providers:[Http, HTTP_PROVIDERS, httpService]
})


export class httpComp{

    getData:string;
    constructor(
    private httpService:httpService){}
    onGet(){
    this.httpService.getData()
    .subscribe(
        data => this.getData=JSON.stringfy(data),
        error => alert(error),
        () => console.log("finish")
    );
    }

Angular2获取错误404未找到

1 个答案: