Angular2 HTTP:未捕获的SyntaxError:意外的令牌< polyfills

时间:2016-02-05 12:52:19

标签: javascript angular angular-http polyfills angular2-routing

所以我正在练习http post并从YouTube教程中获取Angular2的方法,我无法弄清楚问题 这是我的index.html文件:

[AppClassLoader@14dad5dc] weaveinfo Join point 'method-execution(void q35218146.
Test35218146.executeTasks())' in Type 'q35218146.Test35218146' (Test35218146.java:6) 
advised by before advice from 'q35218146.Aspect35218146' (Aspect35218146.java)

这是http服务文件:

<html>
<head>
    <title>MyTodo App</title>

<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>   
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

</head>
<body>

    <script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
System.import('app.js')
  .then(null, console.error.bind(console));
</script>
    <http-comp>Loading..</http-comp>
</body>
</html>

这是app.ts文件:

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

@Injectable()
export class webhttpservice{

constructor(private http : Http){}

getfunctionfromapp(){
   return this.http.get('www.google.com')
              .map(res => res.json());
}
}

bootstrap(httpcomponent,[HTTP_PROVIDERS]);

这些是我得到的原始错误

import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { webhttpservice } from './httpService';
import { HTTP_PROVIDERS } from 'angular2/http';

@Component({
selector : 'http-comp',
template : `

<button (click) = 'reqfunction()'>Get Request</button>
<p></p>
<br>
<button>Post Request</button>
<p></p>

`,
providers : [webhttpservice]
})
export class httpcomponent{

getdata;
constructor(private var1: webhttpservice){}
reqfunction(){
    this.var1.getfunctionfromapp()
            .subscribe(
                data => this.getdata = JSON.stringify(data),
                error => alert(error),
                () => console.log('Finished')

            );
}

}

1 个答案:

答案 0 :(得分:1)

加载包含webhttpservice类的TypeScript文件的请求有点奇怪:

  

评估http://localhost:3000/httpService

应该是:http://localhost:3000/app/httpService.js与您的配置...

您是否将httpService.ts文件放在app文件夹下?根据您的SystemJS配置,您应该。