How to use make use of BokehJS in an Angular app?

Question

I am unable to use the BokehJS library in my Angular app (https://docs.bokeh.org/en/latest/docs/dev_guide/bokehjs.html). I get the following error as soon as I try to call the library from my app :

ERROR in ./node_modules/@bokeh/bokehjs/build/js/lib/index.js 3:9
Module parse failed: Unexpected token (3:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export { version } from "./version";
| export { index } from "./embed";
> export * as embed from "./embed";
| export * as protocol from "./protocol";
| export * as _testing from "./testing";

Here is a detailed step-by-step method to reproduce the issue on a "fresh" computer (I tried it on two different machines, they both get the exact same error at the end):

install nodejs : https://nodejs.org/en/
install angular-cli : npm install -g @angular/cli
initialize a new angular project in the current directory : ng new angular10BokehJSexample
enter the new project directory : cd angular10BokehJSexample
(optional) check that the example angular app works : npm start and open your browser on URL http://localhost:4200
install BokehJS : npm install @bokeh/bokehjs
open your favorite text editor and change the file src/app/app.module.ts. Add the following line with the other imports at the top : import * as Bokeh from '@bokeh/bokehjs'
(optional) if you start the server at this stage, it should still work fine, meaning that BokehJS can be imported successfully (that was not the case with an old version of Angular)
still in the file src/app/app.module.ts, change the class decalaration at the end of the file to make it look like this :

export class AppModule {

  private testBokeh(){
    var item = JSON.parse("just a test");
    Bokeh.embed.embed_item(item);
  }

}

(note: this is just a stub, the code does not work. I’ve put together a more complex code that is supposed to work, but this is sufficient to reproduce my issue)

run npm start again, it cannot compile due to the error mentionned at the beginning of this question.

Any idea regarding what I am doing wrong ? I am not a frontend developer, so I am definitely out of my comfort zone here. Any help would be greatly appreciated.

How to use make use of BokehJS in an Angular app?

0 Answers0