Question

我有一个简单的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）中，这样它就不会与父静态应用程序混淆，并且可以作为窗口小部件加载。

静态应用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应用程序渲染为窗口小部件的最佳方法是什么？

将Angular应用程序封装在Web组件中

0 个答案: