Kenya-West Kenya-West - 1 year ago 83
TypeScript Question

What's wrong with my Angular 2 app (TypeScript)

I have a component EventListComponent

import { Component } from 'angular2/core';

@Component ({
selector: 'el-events',
templateUrl: 'app/events/event-list.component.html'

export class EventListComponent {
pageTitle: string = 'Events List';

which should be rendered in AppComponent

import { Component } from 'angular2/core';
import { EventListComponent } from './events/event-list.component';

selector: 'events-app',
template: `
directives: [ EventListComponent ]

export class AppComponent {
pageTitle: string = 'Local Events App';

Directives, selectors, import/export and entire decorator is setuped correclty, IDE says.
Yes, I use old Angular 2 version with directives, that's a course requirements.

So, there's a problem - page doesn't show components. Here are errors:
enter image description here

And project tree is this:

enter image description here

I discovered that error happens when I add directives, so maybe problem is here. Angular version is:

"dependencies": {
"angular2": "2.0.0-beta.15"


<!DOCTYPE html>

<title>Local Events App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="app/app.component.css" rel="stylesheet" />

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/"></script>

<!-- 2. Configure SystemJS -->
packages: {
app: {
format: 'register',
defaultExtension: 'js'
.then(null, console.error.bind(console));

Loading App...



<div class 'panel panel-primary'>
<div class='panel-heading'>
<div class='panel-body'>
<div class='row'>
<div class='col-md-2'></div>
<div class='col-md-4'>
<input type="text" />
<div class='row'>
<div class='col-md-6'>
<h3>Search by: </h3>
<div class='table-responsive'>
<table class='table'>
<button class='btn btn-primary'>
Show image


Answer Source

You're missing = in your event-list.component.html

<div class 'panel panel-primary'>

It should be

<div class='panel panel-primary'>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download