Bokehjs not working with angular app...]

[Vaibhav_Chavan]

I am using @bokeh/bokehjs(3.1.0) in angular app(15.0) got some dependency that has resolved by following suggestion referred from community discussion…
npm i @bokeh/slickgrid @bokeh/numbro timezone choices.js flatpickr mathjax-full nouislider regl flatbush proj4 hammerjs underscore.template

and written below code in component constructor
var x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10);

  var y = x.map(function (v:number) { return v * 0.5 + 3.0; });

  var source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });

 

  // create some ranges for the plot

  var xdr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });

  var ydr =  new Bokeh.Range1d({ start: -0.5, end: 20.5 });

 

  // make the plot

  var plot = new Bokeh.Plot({

      title: "BokehJS Plot",

      x_range: xdr,

      y_range: ydr,

      background_fill_color: "#F2F2F7"

  });

 

  // add axes to the plot

  var xaxis = new Bokeh.LinearAxis({ axis_line_color: null });

  var yaxis = new Bokeh.LinearAxis({ axis_line_color: null });

  plot.add_layout(xaxis, "below");

  plot.add_layout(yaxis, "left");

 

  // add grids to the plot

  var xgrid = new Bokeh.Grid({ ticker: xaxis.ticker, dimension: 0 });

  var ygrid = new Bokeh.Grid({ ticker: yaxis.ticker, dimension: 1 });

  plot.add_layout(xgrid);

  plot.add_layout(ygrid);

 

  // add a Line glyph

  var line = new Bokeh.Line({

      x: { field: "x" },

      y: { field: "y" },

      line_color: "#666699",

      line_width: 2

  });

  plot.add_glyph(line, source);

 

  // add the plot to a document and display it

  var doc = new Bokeh.Document();

  doc.add_root(plot);

  var div = document.getElementById("myplot");

  Bokeh.embed.add_document_standalone(doc, div);

---

getting below error-
ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading ‘connect’)
TypeError: Cannot read properties of undefined (reading ‘connect’)
at GlyphRendererView.connect (view.js:30:23)
at GlyphRendererView.connect_signals (glyph_renderer.js:135:14)
at build_views.js:34:14
at Generator.next ()
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:22:1)
at _ZoneDelegate.invoke (zone.js:375:26)
at Object.onInvoke (core.mjs:24205:33)
at _ZoneDelegate.invoke (zone.js:374:52)
at Zone.run (zone.js:134:43)
at resolvePromise (zone.js:1214:31)
at zone.js:1121:17
at zone.js:1137:33
at asyncGeneratorStep (asyncToGenerator.js:6:1)
at _throw (asyncToGenerator.js:25:1)
at _ZoneDelegate.invoke (zone.js:375:26)
at Object.onInvoke (core.mjs:24205:33)
at _ZoneDelegate.invoke (zone.js:374:52)
at Zone.run (zone.js:134:43)
at zone.js:1278:36
handleError @ core.mjs:8416

how I can resolve above error…?

[Bryan]

cc @mateusz