tensorflow.js with ml5 conflict at angular

[easypinex]

I built my project based on the Angular framework (8 or 9) , and import both tensorflow.js and ml5.js simultaneously.

I created two pages (component) for each package.

It looks fine if I import package A and only viewed one page.

But when I load another page (which using different js package ),

it would show some errors.

Is there any suggestion to make them work normally, even if the page return?

project src tree

tensor.componet.ts:

       import * as tf from '@tensorflow/tfjs';
       const buf = tf.buffer([2, 3, 4]);
       buf.toTensor().as3D(2, 3, 4);

ml5.component.ts:

       import * as ml5 from "ml5";
       this.knnClassifier = ml5.KNNClassifier();
       this.featureExtractor = ml5.featureExtractor("MobileNet", () => {});

And I try to open the pages as follow sequences:

tensorflow.js(work) -> ml5(crashed)

ml5(work)-> tensorflow.js (crashed)

You can also refer demo about the project as following:

https://codesandbox.io/s/gallant-fermi-7thb6

ml5(work) -> tensorflow.js(crash):

ERROR TypeError: yt(...).makeTensor is not a function
   at t.toTensor (https://7thb6.sse.codesandbox.io/tensor-tensor-module.js:346:16713)
   at TensorComponent.push../src/app/tensor/tensor.component.ts.TensorComponent.ngOnInit (https://7thb6.sse.codesandbox.io/tensor-tensor-module.js:1180:13)
   at callHook (https://7thb6.sse.codesandbox.io/vendor.js:38257:18)
   at callHooks (https://7thb6.sse.codesandbox.io/vendor.js:38227:17)
   at executeInitAndCheckHooks (https://7thb6.sse.codesandbox.io/vendor.js:38180:9)
   at refreshView (https://7thb6.sse.codesandbox.io/vendor.js:43030:21)
   at refreshDynamicEmbeddedViews (https://7thb6.sse.codesandbox.io/vendor.js:44081:21)
   at refreshView (https://7thb6.sse.codesandbox.io/vendor.js:43035:9)
   at refreshComponent (https://7thb6.sse.codesandbox.io/vendor.js:44145:9)
   at refreshChildComponents (https://7thb6.sse.codesandbox.io/vendor.js:42818:9)

tensorflow.js(work) -> ml5(crash):

ERROR TypeError: ht(...).registerTensor is not a function
   at new t (https://7thb6.sse.codesandbox.io/ml5-ml5-module.js:27:14511)
   at Function.t.make (https://7thb6.sse.codesandbox.io/ml5-ml5-module.js:27:14610)
   at yn (https://7thb6.sse.codesandbox.io/ml5-ml5-module.js:27:71583)
   at Object.wn (https://7thb6.sse.codesandbox.io/ml5-ml5-module.js:27:71771)
   at new t (ttps://7thb6.sse.codesandbox.io/ml5-ml5-module.js:151:23393)
   at Object.e.default [as featureExtractor] (https://7thb6.sse.codesandbox.io/ml5-ml5-module.js:151:35938)
   at Ml5Component.push../src/app/ml5/ml5.component.ts.Ml5Component.ngOnInit (https://7thb6.sse.codesandbox.io/ml5-ml5-module.js:277:85)
   at callHook (https://7thb6.sse.codesandbox.io/vendor.js:38257:18)
   at callHooks (https://7thb6.sse.codesandbox.io/vendor.js:38227:17)
   at executeInitAndCheckHooks (https://7thb6.sse.codesandbox.io/vendor.js:38180:9)

My environment :

Angular 9

tensorflow.js:1.7.1

ml5.js:0.5.0

PS.

At first I thought the version of tensorflow.js was conflict,

But even if I downgrade the tensorflow.js version to 1.2.11 (tfjs.tfjs-core.tfjs-data) same as ml5, it couldn't solve this problem.

[avishaan]

I'm having a similar problem but within a react environment.

TypeError: ht(...).registerTensor is not a function
    at new t (ml5.min.js:18)
    at Function.t.make (ml5.min.js:18)
    at yn (ml5.min.js:18)
    at bn (ml5.min.js:18)
    at i (ml5.min.js:18)
    at Object.yl [as decodeWeights] (ml5.min.js:18)
    at t.<anonymous> (ml5.min.js:72)
    at ml5.min.js:72
    at Object.next (ml5.min.js:72)
    at a (ml5.min.js:72)

@easypinex were you able to find a solution? If not, what did you end up doing? I was thinking of switching to a different library if need to

[easypinex]

I'm not resolve it... I detect If loaded other js , window.reload() ... :(