Angular 5 - this.croppieDirective is undefined

[mediasoftpro]

Dear support,
I integrated angular-croppie with latest angular 5 build (1.7 cli), using example code but it throws

message: "this.croppieDirective is undefined"

i setup properly

@ViewChild('directive')
public croppieDirective: CroppieDirective;

and

public ngAfterViewInit() {
this.croppieDirective.croppie.bind({ url: 'assets/angular.png' });
}

on template:
<img #croppie="croppie" [croppieOptions]="croppieOptions" (update)="handleUpdate($event)" />

But not sure how to track and fix this error.

---

Full Error Shown As:

TypeError: WEBPACK_IMPORTED_MODULE_1_croppie is not a constructor
Stack trace:
CroppieDirective.prototype.ngAfterViewInit@webpack-internal:///./node_modules/angular-croppie-module/esm5/angular-croppie-module.js:20:24
....

TypeError: this.croppieDirective is undefined
Stack trace:
EditThumbComponent.prototype.ngAfterViewInit@webpack-internal:///./src/app/photo/modals/editthumbnail/editphoto.component.ts:34:9
...

[guschnwg]

Update your package.json to croppie's 2.5.1 version.

"croppie": "2.5.1"