Error: widget model not found

[Roy-Kid]

Hi, thanks for developing such elegant lib!

I encountered a problem when using my angular project on anywidget. It raise two errors:

Error: widget model not found
    at f.get_model (336.0a90bd910629a565bb7e.js?v=0a90bd910629a565bb7e:1:3460)
    at w.renderModel (134.fe2572ece3b7955c89bb.js?v=fe2572ece3b7955c89bb:1:72097)

and then:

1fbd1aba-2f3b-4d7a-bbda-c573cb6f1d29:98879 Error: NG05104
    at pp.selectRootElement (1fbd1aba-2f3b-4d7a-bbda-c573cb6f1d29:5605:13)
    at r2 (1fbd1aba-2f3b-4d7a-bbda-c573cb6f1d29:3300:57)
    at tp.create (1fbd1aba-2f3b-4d7a-bbda-c573cb6f1d29:4110:302)
    at e.bootstrap (1fbd1aba-2f3b-4d7a-bbda-c573cb6f1d29:4806:83)
    at 1fbd1aba-2f3b-4d7a-bbda-c573cb6f1d29:5065:36
    at k.invoke (5874498f-2969-4d53-9cab-f644150df5d3:99068:121)
    at Object.onInvoke (1fbd1aba-2f3b-4d7a-bbda-c573cb6f1d29:3996:26)
    at k.invoke (5874498f-2969-4d53-9cab-f644150df5d3:99068:46)
    at se22.run (5874498f-2969-4d53-9cab-f644150df5d3:98966:35)
    at 5874498f-2969-4d53-9cab-f644150df5d3:99527:20

I made my ESM file following such steps:

1. build an angular project and get those files: index.html, main.js, polyfills.js
2. use esbuild src/page/dist/app/browser/main.js src/page/dist/app/browser/polyfills.js --bundle --format=esm --outdir=src/molvis/src/dist to anywidgt project folder
3. create a mew index.js with:

function render({ model, el }) {
    const app_root = document.createElement("app-root");
    el.appendChild(app_root);
  }
  export default { render };

import "./dist/main.js";
import "./dist/polyfills.js";

4. esbuild index.js --bundle --format=esm --outdir=./molvis
5. create anywidget.py file:

import anywidget
import traitlets
from pathlib import Path


class ViewWidget(anywidget.AnyWidget):
    _esm = Path('./index.js')

and above errors raised. I suspect it may related to HTML tag definition, and index.js can not find a proper tag to render?

Can you help me with this, or do you know how to debug in the browser?

Thanks a lot!!!

[Roy-Kid]

In case you want to find out more details, https://github.com/MolCrafts/molvis

It is kind of a minimal reproducible environment.