角拳頭一步

-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

回答

相關問題