Angular webpack:无法编译

前端之家收集整理的这篇文章主要介绍了Angular webpack:无法编译前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在学习Angular 5的官方教程.我正在阅读服务: Chapter Service章节

现在,我在这一章中:

See it run

After the browser refreshes,the app should run as before,showing a
list of heroes and a hero detail view when you click on a hero name.

我有这个错误

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.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 /应用程序/ 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();
        }
}

谢谢你的帮助

解决方法

你的属性英雄在heroes.component.ts中声明不正确.

你有:

heroes = Hero[];

它应该是:

heroes: Hero[];

一个常见错误 – 在其他语言中=在为实例变量赋值时有效,但是由于TypeScript是基于JavaScript的(例如使用JSON对象),因此使用:来实现此目的.

猜你在找的Angularjs相关文章