Angular fist step with Tour of Heroes

0
votes

I try a tutorial on Angular with "tour of Heroes"

https://angular.io/tutorial/toh-pt1

The first step work but when I add a Class Hero, my web browser show nothing

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 browser -> blank screen Angular/CLI --> no error

But error in my web browser console:

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

Could you give me your help

Kr

1
angular

1 Answers

1
votes

The arrangement of your code is incorrect. It should be:

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';
}

The @Component() decorator should be above the AppComponent class.