角拳头一步

-1

我尝试角的教程与“英雄之旅”角拳头一步

的第一步工作，但是当我添加一个类的英雄，我的网页浏览器显示什么

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class Hero { 
    id: number; 
    name: string; 
} 
export class AppComponent { 
    hero: Hero = { 
    id: 1, 
    name: 'Windstorm' 
}; 

    title = 'Tour of Heroes'; 


}

Web浏览器 - >黑屏角/ CLI - >没有错误

但错误在我的web浏览器控制台：

Uncaught Error: Unexpected value 'AppComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation. 
    at syntaxError (http://localhost/vendor.bundle.js:17688:34) 
    at http://localhost/vendor.bundle.js:31420:40 
    at Array.forEach (native) 
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (http://localhost/vendor.bundle.js:31402:54) 
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (http://localhost/vendor.bundle.js:42679:70) 
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost/vendor.bundle.js:42652:36) 
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost/vendor.bundle.js:42581:37) 
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (http://localhost/vendor.bundle.js:48322:25) 
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (http://localhost/vendor.bundle.js:48308:21) 
    at Object.../../../../../src/main.ts (http://localhost/main.bundle.js:155:124) 
syntaxError @ compiler.es5.js:1689 
(anonymous) @ compiler.es5.js:15421 
webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata @ compiler.es5.js:15403 
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules @ compiler.es5.js:26680 
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents @ compiler.es5.js:26653 
webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync @ compiler.es5.js:26582 
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4595 
webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4581 
../../../../../src/main.ts @ main.ts:11 
__webpack_require__ @ bootstrap 607e530…:54 
2 @ main.ts:11 
__webpack_require__ @ bootstrap 607e530…:54 
webpackJsonpCallback @ bootstrap 607e530…:25 
(anonymous) @ main.bundle.js:1

你能帮帮我

氪

来源

2017-06-19 Jerry Bauduin

代码的设置不正确。它应该是：

export class Hero { 
    id: number; 
    name: string; 
} 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    hero: Hero = { 
    id: 1, 
    name: 'Windstorm' 
    }; 
    title = 'Tour of Heroes'; 
}

的@Component()装饰应该是以上的AppComponent类。

来源

2017-06-19 10:06:41

回答

相关问题