Angular webpack：编译失败答案

【问题标题】：Angular webpack: Failed to compileAngular webpack：编译失败
【发布时间】：2018-04-11 10:23:39
【问题描述】：

我正在通过官方教程学习 Angular 5。我正在阅读章节服务：Chapter Service

现在，我在本章中：

看它运行

浏览器刷新后，应用应该像以前一样运行，显示当你点击英雄名称时，英雄列表和英雄详情视图。

我有这个错误：

    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 { }

src/app/heroes.component.ts

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();
        }
}

感谢您的帮助

【问题讨论】：

标签： angular typescript

【解决方案1】：

heroes.component.ts 中错误地声明了您的属性英雄。

你有：

heroes = Hero[];

应该是：

heroes: Hero[];

一个常见错误 - 在其他语言中，= 在为实例变量赋值时是有效的，但是由于 TypeScript 是基于 JavaScript（例如使用 JSON 对象），因此您使用 : 来实现此目的。

【讨论】：

【解决方案2】：

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

heroes: Array<Hero> = [];

【讨论】：

它也起作用。谢谢！