angular - angular build后如何直接引用html文件（Chrome扩展开发）

Question

我正在尝试使用 Angular + Typescript 在 Chrome DevTools 中制作一个自定义面板。

我已经能够使用以下代码添加一个新面板：

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

我在 devtools 区域中看到名为“Test”的新面板，并获得了控制台日志，但没有 UI。当我这样做时ng build，我可以看到 ouptut 文件夹没有 panel.component.html 文件，因此丢失的 UI 是有意义的。我知道 build 命令编译/打包所有内容。那么我将如何传递这个参考呢？

标签： angulargoogle-chrome-extension

Answer 1

不确定这是否是“正确”的方法，但这对我有用：

index.html作为参数传入。

index.html<app-root></app-root> 在 app-root （又名 app.component.html 根）内部有一个引用，在我的例子中，插入一个对您要使用的组件的引用<app-panel></app-panel>

现在 UI 已正确显示。

我将此标记为已接受，但如果有人有更好的答案或者我在这里做错了什么，我会喜欢抬头......