typescript - Angular webpack: Misslyckades med att kompilera

Jag lär mig Angular 5 med den officiella handledningen. Jag läser kapitlet Tjänst: Kapitel Tjänst

Nu är jag här i kapitlet:

Se det springa

Efter att webbläsaren uppdateras bör appen fungera som tidigare, visa en lista över hjältar och en detaljerad vy av hjälten när du klickar på ett hjältenamn.

Och jag har det här felet:

    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.

Faktiskt, jag följde bara handledningen och jag har det här felet.

Här är filerna:

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

Tack för din hjälp

Svar #1

Din egenskap heroes deklarerades felaktigt i heroes.component.ts.

Du har:

heroes = Hero[];

Det borde vara:

heroes: Hero[];

Ett vanligt misstag - i andra språk är = giltigt när man tilldelar ett värde till en instansvariabel, men eftersom TypeScript är baserat på JavaScript (t.ex. använder JSON-objekt) använder du : för att uppnå detta.

Svar #2

Försök att ändra detta heroes=Hero[] till:

heroes: Array<Hero> = [];

Relaterade artiklar