CODEWITHSUNDEEP
javascriptangular
Jimmy Adaro
Jimmy Adaro

Reputation: 1405

Simple Angular component throwing many errors

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.

Angular error

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:

Zone.JS 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.

Upvotes: 0

Views: 60

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657158

<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

Upvotes: 0

Claies
Claies

Reputation: 22323

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'
    };
}

Upvotes: 1

Related Questions