How to directly reference html files after angular build (Chrome Extension Development)

Question

I'm trying to make a custom Panel in the Chrome DevTools using Angular + Typescript.

I've been able to add a new Panel using the following code:

chrome.devtools.panels.create('Test', 'test.png', './panel.component.html', function (panel) {
        console.log('hello from callback');
    });  

I see the new Panel called "Test" in the devtools area and I get the console log, but there is no UI. When I do ng build , I can see that the ouptut folder does not have the panel.component.html file, so the missing UI makes sense. I know that the build command compiles/packages everything up. So how would I pass in this reference?

Answer 1

Not sure if this is the "correct" way to do it, but this is what worked for me:

pass in index.html as the parameter.

index.html has a reference to <app-root></app-root> inside the app-root (aka the root app.component.html) insert a reference to the component you want to use, in my case <app-panel></app-panel>

Now the UI is properly shown.

I'm marking this as accepted, but if someone has a better answer or if I'm doing something wrong here, I would love the heads up...