Javascript 将Angular应用程序封装在web组件中_Javascript_Angular_Angular Cli_Web Component_Angular6

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

javascript angular angular6

Javascript 将Angular应用程序封装在web组件中,javascript,angular,angular-cli,web-component,angular6,Javascript,Angular,Angular Cli,Web Component,Angular6,我有一个简单的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

我有一个简单的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组件（ShadowDOM）中，这样它就不会与父静态应用程序发生冲突，并且可以作为小部件加载

静态应用程序索引.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>

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>

` } });


小部件应用程序

script.js:

<!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>

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>

` } });

window.customElements.define（'ng-widget'，类扩展HtmleElement{
构造函数（）{
超级（）；
var shadowRoot=this.attachShadow({
模式：“打开”
});
shadowRoot.innerHTML=
`
NgWidget
` } });

现在，由于指向ng app.js的链接位于shadow dom中，因此不会下载它，我的Angular应用程序也不会启动

在静态网站中将Angular应用程序呈现为小部件的最佳方式是什么？

我真的不明白为什么要将Angular应用程序封装在webcomponent中，但无论如何，您可能希望查看Angular元素，看看是否可以将Angular组件创建为web组件。我看到组件是一个小的断开连接的东西，可以与其他代码粘在一起。在我看来，试图将整个应用程序作为一个组件来使用就像是代码的味道。