I have been trying to make a simple app in Angular, I was able to make it work in Plunker. Unfortunately, it gives me this error

Can't bind to 'joke' since it isn't a known property of 'app-root'.

that I don't know how to handle.

What is the problem?

jokeponent.ts

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { Joke } from '../jokes'

@Component({
  selector: 'app-joke',
  templateUrl: './jokeponent.html',
  styleUrls: ['./jokeponent.css']
})
export class JokeComponent implements OnInit {

  constructor() {}

  @Input("joke") joke: Joke;
  @Output() jokeDeleted = new EventEmitter<Joke>();

  deleteItem() {
    this.jokeDeleted.emit(this.joke)
  }

  ngOnInit() {}
}

joke-formponent.spec

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { JokeFormComponent } from './joke-formponent';

describe('JokeFormComponent', () => {
  let ponent: JokeFormComponent;
  let fixture: ComponentFixture<JokeFormComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ JokeFormComponent ]
    })
    pileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(JokeFormComponent);
    ponent = fixtureponentInstance;
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(ponent).toBeTruthy();
  });
});

joke-listponent

import { Component, OnInit } from '@angular/core';
import {Joke} from '../jokes';

@Component({
  selector: 'app-joke-list',
  templateUrl: './joke-listponent.html',
  styleUrls: ['./joke-listponent.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() {}
}

appponent

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

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.css']
})
export class AppComponent {}

app.module.ts

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 './appponent';
import { JokeFormComponent } from './joke-form/joke-formponent';
import { JokeListComponent } from './joke-list/joke-listponent';
import { JokeComponent } from './joke/jokeponent';

@NgModule({
  declarations: [
    AppComponent,
    JokeFormComponent,
    JokeListComponent,
    JokeComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have been trying to make a simple app in Angular, I was able to make it work in Plunker. Unfortunately, it gives me this error

Can't bind to 'joke' since it isn't a known property of 'app-root'.

that I don't know how to handle.

What is the problem?

joke.ponent.ts

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { Joke } from '../jokes'

@Component({
  selector: 'app-joke',
  templateUrl: './joke.ponent.html',
  styleUrls: ['./joke.ponent.css']
})
export class JokeComponent implements OnInit {

  constructor() {}

  @Input("joke") joke: Joke;
  @Output() jokeDeleted = new EventEmitter<Joke>();

  deleteItem() {
    this.jokeDeleted.emit(this.joke)
  }

  ngOnInit() {}
}

joke-form.ponent.spec

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { JokeFormComponent } from './joke-form.ponent';

describe('JokeFormComponent', () => {
  let ponent: JokeFormComponent;
  let fixture: ComponentFixture<JokeFormComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ JokeFormComponent ]
    })
    .pileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(JokeFormComponent);
    ponent = fixture.ponentInstance;
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(ponent).toBeTruthy();
  });
});

joke-list.ponent

import { Component, OnInit } from '@angular/core';
import {Joke} from '../jokes';

@Component({
  selector: 'app-joke-list',
  templateUrl: './joke-list.ponent.html',
  styleUrls: ['./joke-list.ponent.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() {}
}

app.ponent

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

@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.css']
})
export class AppComponent {}

app.module.ts

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.ponent';
import { JokeFormComponent } from './joke-form/joke-form.ponent';
import { JokeListComponent } from './joke-list/joke-list.ponent';
import { JokeComponent } from './joke/joke.ponent';

@NgModule({
  declarations: [
    AppComponent,
    JokeFormComponent,
    JokeListComponent,
    JokeComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• javascript
• angular
• typescript
• web-ponent

• the demo in plunker is working fine.Please mentions the steps to replicate the issue – brk Commented Jul 20, 2017 at 15:30
• Where is your Joke class in */jokes.ts? can you check path of it. – Avnesh Shakya Commented Jul 20, 2017 at 15:32
• The path for joke.ts is staying in the app folder. The steps I took is just to include every ponent in its own folder and the HTML script in its own ponent.html. That is everything I did. – UnKn0wn27 Commented Jul 20, 2017 at 15:39
• If it is in your app folder then you need to check path, I think. something like: ../app/jokes. – Avnesh Shakya Commented Jul 20, 2017 at 15:42
• I posted the app.module. – UnKn0wn27 Commented Jul 20, 2017 at 15:46

2 Answers 2

From the code you have posted I see that your AppComponent class is empty :

export class AppComponent {}

Since you haven't posted your html code, I am guessing you are doing something similar to the plunker, where my-app in plunker is equivalent to app-root in your question's code:

<app-root *ngFor="let j of jokes" [joke]="j" (jokeDeleted)="deleteJoke($event)"></app-root>

Once you add @Input("joke") joke: Joke to AppComponent class, it should not throw that error anymore:

export class AppComponent {
  @Input("joke") joke: Joke;
  @Output() jokeDeleted = new EventEmitter<Joke>();

  deleteItem() {
    this.jokeDeleted.emit(this.joke)
  }
}

You can try to delete this OnInit method that angular generates for us in this child joke.ponent.ts class that implements this @Input method for Property binding [property]. And also restart the server.