Can't bind to 'data' since it isn't a known property of 'timeline' on Heroku

[Mark Wen]

In my Windows localhost, things are working perfectly. However on Heroku, I get this error: "Template parse errors: Can't bind to 'data' since it isn't a known property of 'timeline' ". 

Here is my code:

exp.ts:

import { Component, Input } from "@angular/core";

import { Title } from "./components/title";

import { Timeline } from "./components/timeline";

@Component({

  selector: "exp",

  template: `

            <div id="Exp" class="Exp content section scrollspy">

              <title [icon]="titleIcon" [title]="titleTitle"></title>

                        <!-- I use and pass data into timeline here --> 

              <timeline [data]="exp"></timeline>

            </div>

            `,

  directives: [Title, Timeline]

})

export class Exp {

  private titleIcon = "briefcase";

  private titleTitle = "Experience";

  @Input("data") exp: Array<Object>;

}

timeline.ts:

import { Component, Input } from "@angular/core";

@Component({

  selector: "timeline",

  template: `

              ...

            `

})

export class Timeline {

  @Input("icon") icon: string;

  @Input("title") title: string;

  @Input("data") data: Array<Object>;  // Here I defined data property

}

I guess I've defined my properties correctly, but I'm still getting this error on Heroku. Any ideas please? Thanks