2
Angular 2 ComponentにJSONデータを読み込もうとしていますが、「予期しないトークン」のエラーが発生しています。ここでは...JSONがAngular 2で読み込まれない理由
を、私はこの「シンプル」の作業を何度も完了することを試みた、まだ私はまだそうすることができなかったので、私は社会に役立つと私はどこかで、この時間を得ることができると思います
は私ですコード：
index.htmlを
<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.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>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
app: { // must match your folder name
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
main.ts
import {bootstrap} from 'angular2/platform/browser';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component';
import { PeopleService } from './people.service';
import 'rxjs/Rx';
bootstrap(AppComponent, [HTTP_PROVIDERS,PeopleService]);
app.compo nent.ts
import {Component} from 'angular2/core';
import {ListComponent} from './list.component';
@Component({
selector: 'my-app',
directives : [ListComponent],
template: '<h1>{{applicationTitle}}</h1><my-list></my-list>'
})
list.component.ts
import {Component} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
import {PeopleService} from './people.service'
import {Person} from './person'
@Component({
selector: 'my-list',
providers:
[
HTTP_PROVIDERS,
PeopleService,
],
template: `
<h2>This is the List component</h2>
<div *ngFor="#person of people">
<h2>{{person.name}}</h2>
<h3>{{person.age}}</h3>
</div>
`
})
export class ListComponent
{
people : Array<Person>
constructor(private _personService:PeopleService)
{
_personService.getPeople()
.subscribe(response => this.people = response);
}
}
people.service.ts
import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Person} from './person';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class PeopleService {
constructor(private http: Http) { }
private dataURL = './app/people.json';
getPeople(): Observable<Person[]> {
return this.http.get(this.dataURL)
.map(this.onSuccess)
.catch (this.onFail);
}
private onSuccess(res: Response) {
if (res.status < 200 || res.status >= 300) {
throw new Error('Bad response status: ' + res.status);
}
let body = res.json();
return body.data || { };
}
private onFail(error: any) {
let errMsg = error.message || 'Server error';
console.error(errMsg);
return Observable.throw(errMsg);
}
}
person.ts
export class Person()
{
age: number;
name: string;
}
people.json
次のように"people":[
{ age: 40, name: "Jordan Houston" },
{ age: 38, name: "Robert Eastham" },
{ age: 23, name: "Josh Beh" },
{ age: 23, name: "Joseph Canina" },
{ age: 24, name: "Alexandra Wilkins" },
{ age: 22, name: "Kiersten Costanzo" },
{ age: 23, name: "Ku Sherwood" },
{ age: 25, name: "Arta Halili" },
{ age: 24, name: "Patrick Cooney" },
{ age: 23, name: "Z.A. Perr" },
{ age: 18, name: "Tyler Mulligan" },
{ age: 26, name: "Dennis Dempsey" },
{ age: 32, name: "Francis Yeager" },
{ age: 23, name: "Phil Belardi" }
]
実際のエラーは、次の
{
"people":[
{ "age": 40, "name": "Jordan Houston" },
{ "age": 38, "name": "Robert Eastham" },
{ "age": 23, "name": "Josh Beh" },
{ "age": 23, "name": "Joseph Canina" },
{ "age": 24, "name": "Alexandra Wilkins" },
{ "age": 22, "name": "Kiersten Costanzo" },
{ "age": 23, "name": "Ku Sherwood" },
{ "age": 25, "name": "Arta Halili" },
{ "age": 24, "name": "Patrick Cooney" },
{ "age": 23, "name": "Z.A. Perr" },
{ "age": 18, "name": "Tyler Mulligan" },
{ "age": 26, "name": "Dennis Dempsey" },
{ "age": 32, "name": "Francis Ye"age"r" },
{ "age": 23, "name": "Phil Belardi" }
]
}
にJSON形式を変更
people.service.ts:32 Unexpected token :System.register.context_1.execute.PeopleService.onFail @ people.service.ts:32CatchSubscriber.error @ Rx.js:3239MapSubscriber._next @ Rx.js:5041Subscriber.next @ Rx.js:10667onLoad @ http.dev.js:660ZoneDelegate.invokeTask @ angular2-polyfills.js:365NgZoneImpl.inner.inner.fork.onInvokeTask @ angular2.dev.js:2103ZoneDelegate.invokeTask @ angular2-polyfills.js:364Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
angular2.dev.js:23887 EXCEPTION: Unexpected token :
エラー
のフォーマットのための私の謝罪はにエラーを変更します。
angular2.dev.js：23877例外：予期しないT
正確なエラーメッセージは何ですか？ –
people.service.ts：32予期しないトークン：System.register.context_1.execute.PeopleService.onFail @ people.service.ts：32CatchSubscriber.error @ Rx.js：3239MapSubscriber._next @ Rx.js：5041Subscriber.next @ Rx .js：10667onLoad @ http.dev.js：660ZoneDelegate.invokeTask @ angular2-polyfills.js：365NgZoneImpl.inner.inner.fork.onInvokeTask @ angular2.dev.js：2103ZoneDelegate.invokeTask @ angular2-polyfills.js：364Zone.runTask @ angular2-polyfills.js：263ZoneTask.invoke @ angular2-polyfills.js：431 angular2.dev。js：23887例外：予期しないトークン： – Beaker
パーサー（http://json.parser.online.fr）でjsonを解析し、有効かどうかを確認してください。 –