Angular 角度网页包：未能编译

我正在通过官方教程学习Angular 5。我正在读《服务》一章：

现在，我在这一章：

看到它跑了吗

浏览器刷新后，应用程序应像以前一样运行，显示 单击英雄名称时，英雄列表和英雄详细信息视图

我有一个错误：

    ERROR in ./src/app/heroes/heroes.component.ts
    Module parse failed: Unexpected token (18:34)
    You may need an appropriate loader to handle this file type.
|     function HeroesComponent(heroService) {
|         this.heroService = heroService;
|         this.heroes = hero_1.Hero[];
|     }
|     HeroesComponent.prototype.ngOnInit = function () {
 @ ./src/app/app.module.ts 12:25-61
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts*

webpack: Failed to compile.
ERROR in src/app/heroes/heroes.component.ts(13,17): error TS1109: Expression expected.

事实上，我只是按照教程，我有这个错误

在这里，文件：

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

import { FormsModule } from '@angular/forms';
import { MagiciansComponent } from './magicians/magicians.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

import { HeroService } from './hero.service';
import { MessageService } from './message.service';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent,
    MagiciansComponent,
    HeroDetailComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [HeroService, MessageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

        heroes =  Hero[];
        selectedHero: Hero;

        constructor(private heroService: HeroService) {}

        ngOnInit() {
                this.getHeroes();
        }

        onSelect(hero: Hero): void {
                this.selectedHero = hero;
        }

        getHeroes(): void {
                this.heroes = this.heroService.getHeroes();
        }
}

src/app/heroes.component.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

import { FormsModule } from '@angular/forms';
import { MagiciansComponent } from './magicians/magicians.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';

import { HeroService } from './hero.service';
import { MessageService } from './message.service';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent,
    MagiciansComponent,
    HeroDetailComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [HeroService, MessageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

        heroes =  Hero[];
        selectedHero: Hero;

        constructor(private heroService: HeroService) {}

        ngOnInit() {
                this.getHeroes();
        }

        onSelect(hero: Hero): void {
                this.selectedHero = hero;
        }

        getHeroes(): void {
                this.heroes = this.heroService.getHeroes();
        }
}

---

感谢您的帮助

您的属性英雄在

heros.component.ts

中声明不正确

你有：

heroes = Hero[];

应该是：

heroes: Hero[];

---

一个常见错误-在其他语言中，当为实例变量赋值时，

=

是有效的，但是由于TypeScript是基于JavaScript的（例如使用JSON对象），您可以使用

：

来实现这一点。

尝试将此heros=Hero[]更改为：

heroes: Array<Hero> = [];

英雄：数组=[]；

---

它也可以工作。谢谢