角度2.0 - service.jsが登録として検出されましたが、実行されませんでした

Question

私と一緒に裸にしてください、私はAngularJS 2.0を初めて使っています angle 2.0チュートリアルのリンクに続きました。

私は正常にコースのリストを表示しますが、私はAuthorComponentを作成したときに私のアプリは、次のエラーのため、もう実行されません。

Error: http://localhost:3000/app/components/author.service.js detected as  register but didn't execute. 
Error loading http://localhost:3000/app/components/author.service.js as "./author.service" from http://localhost:3000/app/components/author.component.js 
at SystemJSLoader.<anonymous> (system.src.js:3261) 
at SystemJSLoader.<anonymous> (system.src.js:3526) 

at SystemJSLoader.<anonymous> (system.src.js:3774) 
at SystemJSLoader.<anonymous> (system.src.js:4121) 
at SystemJSLoader.instantiate (system.src.js:4357) 
at system.src.js:333 
at Zone.run (angular2-polyfills.js:1243) 
at zoneBoundFn (angular2-polyfills.js:1220) 
at lib$es6$promise$$internal$$tryCatch (angular2-polyfills.js:468) 
at lib$es6$promise$$internal$$invokeCallback (angular2-polyfills.js:480) 

app.component.ts

import {Component} from 'angular2/core'; 
import {CourseComponent} from './components/course.component'; 
import { AuthorComponent } from './components/author.component'; 


@Component({ 
selector: 'my-app', 
template: ` 
<h1>Test angular application</h1> 
<course></course>  
<author></author> 
`, 
directives:[AuthorComponent,CourseComponent] 
}) 
export class AppComponent { } 

CourseComponent

import { Component } from 'angular2/core'; 
import { CourseService } from './../services/courses.service'; 
@Component({ 
    selector:'course', 
    template:` 
    <h1>Courses component page</h1> 
    {{ title }} 
    <ul> 
    <li *ngFor="#course of courses"> 
    {{ course }} 
    </li> 
    </ul>  
    `, 
    providers:[CourseService] 
}) 

export class CourseComponent{ 
title="List of Courses"; 
courses; 

constructor(courseService:CourseService){ 
    this.courses=courseService.getCourses(); 
} 
} 

CourseService

export class CourseService{ 
getCourses():string[]{ 
    return ["Math","English","Science"]; 
} 
} 

AuthorComponent

import { Component } from 'angular2/core'; 
import { AuthorService} from './../services/author.service'; 
@Component({ 
selector:'author', 
template:` 
     <h3>List of Authors</h3> 
     {{title}} 
<ul> 
<li *ngFor="author of authors"> 
    {{author}} 
</li> 
</ul> 
`, 
providers:[AuthorService] 
}) 


export class AuthorComponent{ 
title="List of Authors"; 
authors:string[]; 

constructor(authorService:AuthorService){ 
    this.authors=authorService.getAuthors(); 
} 
} 

AuthorService

export class AuthorService{ 

getAuthors():string[]{ 
    return ["Author01","Author02"]; 
} 

} 

Package.json

{ 
"name": "angular_quickstart", 
"version": "1.0.0", 
    "scripts": { 
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",  
"tsc": "tsc", 
"tsc:w": "tsc -w", 
"lite": "lite-server", 
"typings": "typings", 
"postinstall": "typings install" 
}, 
    "license": "ISC", 
"dependencies": { 
"angular2": "2.0.0-beta.7", 
"systemjs": "0.19.22", 
"es6-promise": "^3.0.2", 
"es6-shim": "^0.33.3", 
"reflect-metadata": "0.1.2", 
"rxjs": "5.0.0-beta.2", 
"zone.js": "0.5.15" 
}, 
"devDependencies": { 
"concurrently": "^2.0.0", 
"lite-server": "^2.1.0", 
"typescript": "^1.7.5" 
} 
} 

編集 Editted代わりもちろん薬について。私はCourseコンポーネントで見る

Answer 1

、あなたの代わりにAuthorComponentでもcourse

template:` 
    <h1>Courses component page</h1> 
    {{ title }} 
    <ul> 
    <li *ngFor="#course of courses"> 
    {{ course }} 
    </li> 
    </ul>  
    `, 

のdrugを持って、あなたはあなたのngForが間違っているループの

template:` 
     <h3>List of Authors</h3> 
     {{title}} 
<ul> 
<li *ngFor="#author of authors"> 
    {{author}} 
</li> 
</ul> 
`, 

Answer 2

に#を入れるのを忘れ

<ul> 
    <li *ngFor="#course of courses"> 
    {{ drug }} 
    </li> 
    </ul> 

また、あなたはので、どのように知っている角度うdrugを定義したことはありません

<ul> 
    <li *ngFor="let course of courses"> 
    {{ course }} 
    </li> 
</ul> 

すべきですか？

Answer 3

私の問題は修正されました。 エディタを開いてpharmacy.service.tsファイルがまだ保存されていないことがわかりました。

これが私の問題の本当の原因であるかどうかはわかりません。