Error: Template parse errors: Can't bind to 'myProperty' since it isn't a known property of 'myComponent'

Question

After upgrading from Angular 2.1.0 to 2.4.3 and webpack from 2.1.0-beta.25 to 2.2.0-rc.4 I recive this error if i run my webapp (the build works fine without errors):

Error: Template parse errors: Can't bind to 'center' since it isn't a known property of 'placeFilter'. 

At the moment I have one single central model like this (yes I know :-) I will change it afterwards):

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';

    import { AppRoutingModule } from './app.routes';

    ...
    import {MapComponent} from './map/map/map.component';
   ...
    import {PlaceFilterComponent} from './map/shared/components/placeFilter.component';
    ...

    @NgModule({
        imports: [BrowserModule, AppRoutingModule, FormsModule, HttpModule],
        declarations: [...
            MapComponent,
           ...
            PlaceFilterComponent,
            ...
        ],
        bootstrap: [AppComponent]
    })

    export class AppModule { }

My MapComponent contains a sub component called PlaceFilterComponent:

import { Component, OnInit, OnDestroy, Input, Output, NgZone  } from '@angular/core';
import { ActivatedRoute, Params, Router} from '@angular/router';
import {Subscription} from "rxjs";
import {TimerObservable} from "rxjs/observable/TimerObservable";

import services

import models

@Component({
    selector: 'emersy-content',
    templateUrl: './map.component.html',
    providers: [myServices]
})

export class MapComponent implements OnInit, OnDestroy {
...

    constructor(private placeService: PlaceService, private externalService: ExternalServiceService, private zone: NgZone, private route: ActivatedRoute, private router: Router) {
        ...

        });
    }

   ...
}

Here my MapComponentTemplate:

<div class="filterbox-map" *ngIf="!onlyMap">
    <place-filter (onSearchLocationChange)="searchLocationChange($event)" (onShowSideBarButtonClick)="showSideBarButtonClick()" [center]="center" [searchTerm]="searchTerm"></place-filter>
</div>

And my PlaceFilter Component is made like this:

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

import {Center} from '../models/center'

declare var google: any;

@Component({
    selector: 'place-filter',
    templateUrl: './placeFilter.component.html'
})

export class PlaceFilterComponent {
...
    private _center: Center;    
    get center() {
        return this._center;
    }
    @Input() set center(center: Center) {
        this._center = center;
    }



    constructor() {

    } 
...
}

My folder structure is like this:

app
L app.module.ts
L map
 L map
 | L map.component.ts
 | L map.component.html
 L shared
  L components
    L placefilter.component.ts
    L placefilter.component.html

Answer 1

export class PlaceFilterComponent {
...
    private _center: Center;    
    get center() {
        return this._center;
    }
    // try like this 
    @Input() center:Center;



    constructor() {

    } 
...
}

Answer 2

Sometimes we forgot to check some basic things, and this happened with me in my Angular application. I created a new component with the command ng g c audio-element and I used them in another component.

<!--AUDIO-->
<div *ngIf="theWorksheetElement?.type === 7" class="fill">
    <audio-element [worksheetElement]="theWorksheetElement" [style.pointer-events]="isResizing ? 'none' : 'auto'"></audio-element>
</div>

And I was always getting the error as follows.

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'worksheetElement' since it isn't a known property of 'audio-element'. 1. If 'audio-element' is an Angular component and it has 'worksheetElement' input, then verify that it is part of this module. 2. If 'audio-element' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I was sure that I added this component to my related module. Now comes the funny part my selector was different in the component typescript file.

@Component({
  selector: 'app-audio-element',
  templateUrl: './audio-element.component.html',
  styleUrls: ['./audio-element.component.scss']
})

I changed the app-audio-element to audio-element and then it started working as expected. Just sharing for the people who might be making the same problem.