Инкапсуляция приложения Angular внутри веб-компонента - PullRequest
Новая
       19

Инкапсуляция приложения Angular внутри веб-компонента

0 голосов
/ 31 мая 2018

У меня есть простое приложение angular-cli, состоящее только из одного компонента (app.component).Я создал один пользовательский build-script.js, который я использую для объединения всех файлов (.js и .css), созданных с помощью ng build --prod.Таким образом, я получаю только два файла в моей папке dist (Index.html и ng-app.js).

У меня есть еще один статический веб-сайт с двумя файлами index.html и script.js.Теперь я хочу загрузить мое скомпилированное приложение Angular как виджет внутри этого статического приложения.Я пытаюсь инкапсулировать приложение Angular внутри веб-компонента (shadow 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 находится внутри теневого домена, оно не загружается, и мое приложение Angular не загружается.

Как лучше всего отобразить приложение Angular в виде виджета на статическом веб-сайте?

...