Simple Angular component throwing many errors

Question

I'm totally new to Angular 2 (MEAN stack). I started just 1 hour ago.

I'm following the official tutorial for newbies (https://angular.io/docs/ts/latest/tutorial/toh-pt1.html)

I have this app.component.ts:

import { Component } from '@angular/core';

export class Hero {
    id: number;
    name: string;
}

hero: Hero = {
    id: 1,
    name: 'Windstorm'
};

@Component({
  selector: 'my-app',
  template: '<h1>{{title}}</h1> <h2>{{hero.name}} details!</h2>'
})

export class AppComponent  { 
    title = 'Tour of Heroes';
}

Just as the tutorial says it must be done. Now, the console throw me a lot of errors.

I don't have any idea about what could be the issue.

Edit 1:

Trying to downgrade Zone.JS like this npm i --save [email protected] (previously 0.7.5) just broke something. Now npm start throw this error:

Edit 2:

I modified the start object in package.json to this:

"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",

Seems to work properly (now the localhost is working).

The console keeps showing the errors like the above image.

simple google search on the error brought up this: github.com/angular/zone.js/issues/427 try some of the things mentioned there — Nitsan Baleli
– Nitsan Baleli, Commented Jan 15, 2017 at 20:15

Claies · Accepted Answer · 2017-01-15 21:12:29Z

1

Your code is slightly incorrect. the hero instance is in the wrong location.

In order to be accessible to other parts of the app (and to the template), the instance needs to be inside the export. The error you are getting is alerting you to the fact that you are trying to create a template binding with an instance that isn't exported.

The correct code looks like the following:

...
@Component({
  selector: 'my-app',
  template: '<h1>{{title}}</h1> <h2>{{hero.name}} details!</h2>'
})

export class AppComponent  { 
    title = 'Tour of Heroes';
    hero: Hero = {
      id: 1,
      name: 'Windstorm'
    };
}

answered Jan 15, 2017 at 21:12

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jimmy Adaro Over a year ago

Now it's working, thanks for explaining! Being curious I tried doing something like this: @Component({ selector: 'title', template: '123'}) so the document title should be changed to "123", is not working, maybe because Angular can't modify outside the body?

Claies Over a year ago

because <title></title> is outside the <body> tag, it's not part of the angular lifecycle; however, angular provides a Title service to make a browser platform call. see angular.io/docs/ts/latest/cookbook/set-document-title.html

Günter Zöchbauer · Accepted Answer · 2017-01-15 21:13:02Z

0

<h2>{{hero.name}}

is invalid because the component class doesn't have a hero field and the component instance is the scope of bindings in the view

answered Jan 15, 2017 at 21:13

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Collectives™ on Stack Overflow

Simple Angular component throwing many errors

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related