Angular 2.0 - service.js检测为注册但未执行

请裸机，我是AngularJS 2.0的新手我跟着this link for angular 2.0 tutorial。Angular 2.0 - service.js检测为注册但未执行

我成功显示的课程名单，但是当我创建了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药物代替当然。

来源

2017-02-09 iamj

我在Course成分看，你有drug代替course

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

另外，在AuthorComponent，你忘了把#在for循环

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

来源

2017-02-09 14:14:30

你也可以做'

' –

嗨Tumen_t，感谢您回应我已经改变了我的* ngFor但我仍然encoutered的错误 – iamj

您ngFor是错误的

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

应该

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

还没有定义过drug所以怎么会知道角？

来源

2017-02-09 14:20:34

Hi Mike，感谢您的回复，我已经将药物改为课程并删除＃我可以查看课程，但是当我将作者组件包含在appcomponent中时，在控制台中遇到了上述错误。 – iamj

@iamj摆脱app.component中的指令行 –

我的问题已修复。刚刚打开编辑器，发现pharmacy.service.ts文件仍未保存。

我不知道这是否是我问题的真正原因。

来源

2017-02-10 05:35:31 iamj

我做了同样的事情，忘记保存服务ts文件。 – Scott

Angular 2.0 - service.js检测为注册但未执行

回答

相关问题