Support for Angular 6 and RxJS 6

[mlc-mlapis]

Hi,

because RxJS 6 (and Angular 6 uses RxJS 6) changed syntax for imports of all observables from ...
import { Observable } from 'rxjs/Observable'; to ... import { Observable } from 'rxjs'; ... it is now a problem to correctly use ng2-konva with it.

Do you think is it possible to publish release 1.0 which would be fully compatible with Angular 6?

There should be just one change I think ... and it is exactly related to the import of Observable ...

import { Observable } from 'rxjs/Observable'; should be changed to import { Observable } from 'rxjs';

I would be great if you can do it. Thanks.

[Lokis2009]

same problem
i cant't update my project ((
can you please update it?

[rafaesc]

@mlc-mlapis @Lokis2009 Ok, I've published the fix under v2.0.7
Please try it and let me know if it works.

[mlc-mlapis]

@rafaesc ... thanks for that but there is still some problem ... especially using import { Observable } from 'rxjs/Observable'; in your sources ... because there are lines in *.d.ts files:

/ng2-konva/lib/components/core-shape.component.d.ts

import { Observable } from 'rxjs/Observable';

/ng2-konva/lib/components/stage.component.d.ts

import { Observable } from 'rxjs/Observable';

ng2-konva/lib/ko.interface.d.ts

import { Observable } from 'rxjs/Observable';

[rafaesc]

@mlc-mlapis yes, you are right, I have updated the package

Try to upgrade to version 6.0.0 of ng2-konva, and let me know if it works.

[Lokis2009]

After upgrade to angular 6 and ng2-konva 6.0.0. when i build app in --prod mode having error :

main.e2e12942f5429c9609d8.js:1 ERROR ReferenceError: Konva is not defined
at t.initKonva (main.e2e12942f5429c9609d8.js:1)
at t.ngOnInit (main.e2e12942f5429c9609d8.js:1)
at main.e2e12942f5429c9609d8.js:1
at main.e2e12942f5429c9609d8.js:1
at Jl (main.e2e12942f5429c9609d8.js:1)
at Sa (main.e2e12942f5429c9609d8.js:1)
at Object.updateDirectives (1.3a52f7946be6d1214860.js:1)
at Object.updateDirectives (main.e2e12942f5429c9609d8.js:1)
at $l (main.e2e12942f5429c9609d8.js:1)
at aa (main.e2e12942f5429c9609d8.js:1)

there is no problem, when i use simple ng serve (((

[mlc-mlapis]

@rafaesc ... I apologize, I did the successful tests with 6.0.0 - but I just forget to report it immediately back.

[mlc-mlapis]

@Lokis2009 ... because it's AOT compilation. Sounds strange Konva is not defined ... looks like the compilation can't find Konva lib.

[rafaesc]

Did @Lokis2009 try to install konva? Because it's a dependency

[rafaesc]

Thanks @mlc-mlapis

[Lokis2009]

"dependencies": {
    "@angular/animations": "^6.0.7",
    "@angular/cdk": "^6.3.2",
    "@angular/common": "^6.0.7",
    "@angular/compiler": "^6.0.7",
    "@angular/core": "^6.0.7",
    "@angular/forms": "^6.0.7",
    "@angular/http": "^6.0.7",
    "@angular/material": "^6.3.2",
    "@angular/platform-browser": "^6.0.7",
    "@angular/platform-browser-dynamic": "^6.0.7",
    "@angular/router": "^6.0.7",
    "@asymmetrik/ngx-leaflet": "^3.0.2",
    "@auth0/angular-jwt": "^2.0.0",
    "angular-font-awesome": "^3.1.2",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "konva": "^2.1.7",
    "leaflet": "^1.3.1",
    "ng2-konva": "^6.0.0",
    "ngx-cookie": "^4.0.2",
    "rxjs": "^6.2.1",
    "zone.js": "^0.8.26"
  },

@mlc-mlapis @rafaesc
here is part of my package.json
i installed Konva by npm i konva@2.1.7 --save, run npm install, but it's still doesn't work in prod mode ((

[mlc-mlapis]

@Lokis2009 ... and the problem appears during compilation or in run-time?

[Lokis2009]

@mlc-mlapis it compiles successfully, i get error when i try to use konva in component.
I mean component is loading, work and when i get data for draw (i think after it inited Konva) i got this error ((
it works equally in lazy-loaded component

[rafaesc]

@Lokis2009 Can you send a repo with this issue?

[Lokis2009]

@rafaesc yes )
https://github.com/Lokis2009/konvaTest.git

[campa]

Same problem here guys

[Rollmops]

Same problem ... 'Konva is not defined' after building.

[Rollmops]

import 'konva/konva' did fix the problem for me.

[seanmoghadam]

Solved it also with: import * as Konva from 'konva/konva';

[tomschreck]

I'm having the same 'ERROR ReferenceError: Konva is not defined' issue. I believe it's an AOT issue when building Angular app for deployment. I'm using Angular 7 and "ng2-konva": "^6.0.0".

I had to modify the suggested import * as Konva from 'konva/konva'; fix to import * as Konva from 'ng2-konva'; so I could import Konva.KonvaModule in my app.module. However, this has not fixed the issue for me.

Does anyone have another suggestion for how to get Kona to build properly with Angular 7 and AOT enabled?

Thanks

Tom

[haom96]

Solved it also with: Adding path of script konva js into angular.json.

[jcarrenogallego]

Solved it also with: Adding path of script konva js into angular.json.

Thanks!! it wotks for me :D