Kitware / paraviewweb

Web framework for building interactive visualization relying on VTK or ParaView to produce visualization data
http://kitware.github.io/paraviewweb/
BSD 3-Clause "New" or "Revised" License
165 stars 51 forks source link

Using paraviewweb within Angular #469

Closed tp-cz closed 6 years ago

tp-cz commented 6 years ago

Hi, I am trying to test the NativeUI/Canvas/RemoteRenderer example on my local machine. I created a new Angular application and imported all libraries that are mentioned here: http://kitware.github.io/paraviewweb/docs/setup.html , especially these ones:

$ npm install paraviewweb  --save
$ npm install kw-web-suite --save-dev
$ npm install normalize.css --save-dev
$ npm install monologue.js --save-dev

Unfortunately, I am receiving warnings when I want to import classes necessary the RemoteRenderer example:

WARNING in ./src/app/pv/pv.component.ts
23:27-39 "export 'SmartConnect' was not found in 'wslink/src/SmartConnect'

WARNING in ./src/app/pv/pv.component.ts
25:28-45 "export 'ParaViewWebClient' was not found in 'paraviewweb/src/IO/WebSocket/ParaViewWebClient'

WARNING in ./src/app/pv/pv.component.ts
30:31-45 "export 'RemoteRenderer' was not found in 'paraviewweb/src/NativeUI/Canvas/RemoteRenderer'

WARNING in ./src/app/pv/pv.component.ts
32:12-22 "export 'SizeHelper' was not found in 'paraviewweb/src/Common/Misc/SizeHelper'

WARNING in ./src/app/pv/pv.component.ts
35:12-22 "export 'SizeHelper' was not found in 'paraviewweb/src/Common/Misc/SizeHelper'

Could you provide me any hint to solve it? :-)

[EDIT] Solved. I used wrong import notation:

Wrong: 
import {SmartConnect} from "wslink/src/SmartConnect";
Correct:
import SmartConnect from "wslink/src/SmartConnect";

There is one more thing one has to do in order to make it work. It is necessary to install setimmediate module and import it in the component (*.ts file) where paraviewweb is used. Installation of the module:

npm install setimmediate --save

Importing the module:

...
import { Component, OnInit, ViewChild } from '@angular/core';

import 'setimmediate';     <-- IMPORT
import SmartConnect from "wslink/src/SmartConnect";
import RemoteRenderer from "paraviewweb/src/NativeUI/Canvas/RemoteRenderer";
...
jourdain commented 6 years ago

setImmediate should have been managed by babel. But I guess what you did is fine as well.