我有一个简单的angular-cli应用程序，只包含一个组件（app.component） . 我创建了一个自定义build-script.js，用于合并使用ng build --prod创建的所有文件（.js和.css） . 所以我的dist文件夹中只有两个文件（Index.html和ng-app.js） .
我有另一个静态网站，只有两个文件index.html和script.js . 现在我想在这个静态应用程序中加载我编译的Angular应用程序作为一个小部件 . 我试图将Angular应用程序封装在Web组件（阴影dom）中，这样它就不会与父静态应用程序混淆，并且可以作为窗口小部件加载 .
static app index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Widget App</title>
</head>
<body>
<!-- custom web component Widget holding angular app -->
<ng-widget></ng-widget>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>
script.js:
window.customElements.define('ng-widget', class extends HTMLElement {
constructor() {
super();
var shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.innerHTML =
`
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgWidget</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
<!-- The ng-app.js is not getting download since it is inside shadow dom -->
<script type="text/javascript" src="./ng-app.js"></script>
</body>
</html>
` } });
现在，因为 ng-app.js 的链接在阴影dom中，所以它没有被下载，我的Angular应用程序也没有引导 .
将Angular应用程序呈现为静态网站内的窗口小部件的最佳方法是什么？