0

I've been following the book 'Angular2 From Theory To Practice' and I've come across a custom directive that works perfectly on the plnkr provided by the book but when I try to compile it in node.js it gives me below error:

a "Property 'over' does not exist on type 'Object'."

Here is the plnkr: http://plnkr.co/edit/J1ovl0c6hvZE73nRS29o?p=preview

Here is "my" code:

    **app.module.ts**


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

    import { AppComponent } from './app.component';

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



    **app.component.ts**
    import { Component } from '@angular/core';

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



    **app.component.html**
    <img [ccRollover]="{
       'initial':'https://unsplash.it/200/300?image=201',
       'over':'https://unsplash.it/200/300?image=202'
    }" />


**rollover.directive.ts**
    import { Directive, HostBinding, HostListener, Input } from '@angular/core';

@Directive({
  selector: 'img[ccRollover]'
})
export class RolloverImageDirective {
  @Input('ccRollover') config: Object = {
    'initial': 'https://unsplash.it/200/300?image=201',
    'over': ''
  };

  @HostBinding('src') private imagePath: string;

  ngOnChanges() {
    if (this.config.initial) {
      this.imagePath = this.config.initial;
    }
  }

  @HostListener('mouseover') onMouseOver() {
    this.imagePath = this.config.over;
  }

  @HostListener('mouseout') onMouseOut() {
    this.imagePath = this.config.initial;
  }
}

Am I missing something in the ts.config file or maybe a compiling option in node.js, that allows this code to be successfully compiled?

Hiren Gohel
  • 4,942
  • 6
  • 29
  • 48
user2983177
  • 201
  • 2
  • 6
  • 18
  • 1
    If you think it's not a duplicate please let me know. All you have to do is to change `@Input('ccRollover') config: Object` to `@Input('ccRollover') config: any` or pre-defined type. – eko Aug 15 '17 at 12:48
  • your plunker is working without any issues – FAISAL Aug 15 '17 at 12:52
  • @echonax thanks, that fixed it, but why does the plnkr's compiler accept the Object type and node.js doesn't? – user2983177 Aug 15 '17 at 12:54
  • 1
    @user2983177 it's not about node.js your compiler is giving the typecheck error. Since plunker ignores these errors your plunker is working. – eko Aug 15 '17 at 13:14

0 Answers0