-2

I've been stepping through the tutorial on Angulars own homepage (the tour of heroes) to learn Angular 2 but have stumbled upon a problem when doing the chapter about Services. When running the app I get the above error message which I can't find anything about anywhere. So I was wondering if there's anybody who could explain to me what this means? I only find topics on a similar issue but then the character is < and the error is rather an uncaught syntaxerror. 

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('@angular/core');
var forms_1 = require('@angular/forms');
var platform_browser_1 = require('@angular/platform-browser');
var app_component_1 = require('./app.component');
var hero_detail_component_1 = require('./hero-detail.component');
var AppModule = (function () {
    function AppModule() {
    }
    AppModule = __decorate([
        core_1.NgModule({
            imports: [
                platform_browser_1.BrowserModule,
                forms_1.FormsModule
            ],
            declarations: [
                app_component_1.AppComponent,
                hero_detail_component_1.HeroDetailComponent
            ],
            bootstrap: [
                app_component_1.AppComponent
            ]
        }),
        __metadata('design:paramtypes', [])
    ], AppModule);
    return AppModule;
}());
exports.AppModule = AppModule;
//# sourceMappingURL=app.module.js.map

Thrown Error

Sajruss
  • 37
  • 7
  • 3
    Probably this is a syntax error, so you should post your code here, at least the code around the line that indicates the error. if this is an syntax error, we can not help you without looking at *your* code, it doesn't matter if you copied it from that site – Hugo David Farji Nov 29 '16 at 12:54
  • I was thinking that this was the case but I'm furious since I don't find it anywhere in the indicated in the console error.. I will paste the code give me one second – Sajruss Nov 29 '16 at 13:00
  • @HugoFarji do you think it's the ending in the line before the return of the appmodule? (the one that says __metadata('design:paramtypes', []) ], AppModule);) – Sajruss Nov 29 '16 at 14:35
  • I dont think so, because it's opened previously at var AppModule = __decorate([ . Are you sure this is the file where the console throws the error? The console says what line? – Hugo David Farji Nov 29 '16 at 14:47
  • Yes seems so, and I don't find anything me neither in the other files it throws error in if you see above – Sajruss Nov 29 '16 at 15:13
  • @HugoFarji I found the issue finally, it was in my component.ts file where I had accidentally set a property with an equal sign instead of colon making it it a variable instead. – Sajruss Nov 30 '16 at 12:33
  • Great! If you can post it as an answer, with a description and some little code to explain where was the problem, it would be great. Because this could help somebody who read SO in the future – Hugo David Farji Nov 30 '16 at 13:30

1 Answers1

1

So I solved the issue myself. The problem was that I had set one object property to become a variable instead which made Angular2 read it in such way that it found the unexpected token ]. This was the property heroes below where I had thus set an equal sign instead of colon.

export class HeroesComponent implements OnInit  {

heroes = Hero[]; **//THIS CREATES THE ERROR, = SHOULD BE REPLACED WITH ://**
selectedHero: Hero;

constructor(private heroService: HeroService) { }

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

ngOnInit(): void{
    this.getHeroes();
}


onSelect(hero: Hero): void {
  this.selectedHero = hero;
}
}
Sajruss
  • 37
  • 7