title: Uncaught Error: Template parse errors: Angular 4
body: <p>I have been trying to make a simple app in Angular, I was able to make it work in <a href="http://embed.plnkr.co/HVqUUWPVLtyfE2KC574y/" rel="nofollow noreferrer">Plunker</a>. Unfortunately, it gives me this error </p>
  
  <blockquote>
    <p>Can't bind to 'joke' since it isn't a known property of 'app-root'.</p>
  </blockquote>
  
  <p>that I don't know how to handle. </p>
  
  <p>What is the problem?</p>
  
  <p><strong>joke.component.ts</strong></p>
  
  <pre><code>import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
  import { Joke } from '../jokes'
  
  @Component({
    selector: 'app-joke',
    templateUrl: './joke.component.html',
    styleUrls: ['./joke.component.css']
  })
  export class JokeComponent implements OnInit {
  
    constructor() {}
  
    @Input("joke") joke: Joke;
    @Output() jokeDeleted = new EventEmitter&lt;Joke&gt;();
  
    deleteItem() {
      this.jokeDeleted.emit(this.joke)
    }
  
    ngOnInit() {}
  }
  </code></pre>
  
  <p><strong>joke-form.component.spec</strong></p>
  
  <pre><code>import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  
  import { JokeFormComponent } from './joke-form.component';
  
  describe('JokeFormComponent', () =&gt; {
    let component: JokeFormComponent;
    let fixture: ComponentFixture&lt;JokeFormComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ JokeFormComponent ]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(JokeFormComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should be created', () =&gt; {
      expect(component).toBeTruthy();
    });
  });
  </code></pre>
  
  <p><strong>joke-list.component</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {Joke} from '../jokes';
  
  @Component({
    selector: 'app-joke-list',
    templateUrl: './joke-list.component.html',
    styleUrls: ['./joke-list.component.css']
  })
  export class JokeListComponent implements OnInit{
    jokes: Joke[];
  
    constructor() {
      this.jokes = [
        new Joke("I am telling a joke.", "Haha, that's funny!"),
        new Joke("I am telling an even funnier joke.", "Hahahahaha!!"),
        new Joke("I am telling the funniest joke.", "HAHAHAHAHAHA!!!!")
      ]
    }
    addJoke(joke) {
      this.jokes.unshift(joke);
    }
    deleteJoke(joke) {
      let indexToDelete = this.jokes.indexOf(joke)
      if (indexToDelete !== -1) {
        this.jokes.splice(indexToDelete, 1);
      }
    }
  
    ngOnInit() {}
  }
  </code></pre>
  
  <p><strong>app.component</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {}
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  
  import { AppComponent } from './app.component';
  import { JokeFormComponent } from './joke-form/joke-form.component';
  import { JokeListComponent } from './joke-list/joke-list.component';
  import { JokeComponent } from './joke/joke.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      JokeFormComponent,
      JokeListComponent,
      JokeComponent,
    ],
    imports: [
      BrowserModule,
      FormsModule,
      ReactiveFormsModule,
      HttpModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>