使用 Angular 4 组件作为小部件（在静态网站上）答案

【问题标题】：Using Angular 4 component as widget (on a static website)使用 Angular 4 组件作为小部件（在静态网站上）
【发布时间】：2018-01-19 11:17:53
【问题描述】：

有没有办法将我的 Angular 4 组件（使用 webpack 的类似小部件的邮件窗口应用程序）注入任何静态网站，最好使用 <script> 标签？

找到了一些博客文章，但它们都在使用 SystemJS，而我的应用正在使用 webpack，似乎没有任何结果。

【问题讨论】：

标签： javascript angular webpack

【解决方案1】：

Angular 应用程序必须始终有根元素，通常插入在index.html 的<body> 中。假设您已经编写了小部件，其中根组件 f.e.是<widget>，您可以将其与页面上的任何静态标记混合使用：

<!doctype html>
<html>

  <head>
    <title>title</title>
  </head>

  <body>

    <header>
        <nav>Brand</nav>
    </header>

    <aside>
        Menu
        <!-- It can also be injected in any other element -->
        <widget></widget>
    </aside>

    <main>
        Content
    </main>

  </body>

</html>

如果您的应用程序是使用 Angular CLI 引导的，它在后台使用 webpack，只需将您的静态标记放在 src/index.html 中即可。

已编辑：如果您想将您的小部件注入任何其他页面，您可以尝试按照以下步骤进行操作：

再创建一个脚本，在其中创建应用的根元素，然后将其粘贴到正文中
将您的 Angular 应用程序捆绑到静态文件中。为简单起见，最好有一个 .js 文件。
动态创建脚本元素并将静态包的路径提供给脚本的源代码
将其动态注入页面正文

有点像：

<script type="text/javascript" charset="utf-8">
    window.addEventListener('load', () => {
      const widgetElement = document.createElement('widget')
      // document.body is not necessary here, it can be any other element
      document.body.appendChild(widgetElement) 

      const widgetCode = document.createElement('script')
      widgetCode.src = '<path to bundled angular app>'
      document.body.appendChild(widgetCode)
    })
</script>

我创建了plnkr，这可能对你有点帮助

【讨论】：

感谢您的回答 :) 我的问题不涉及将组件放在我自己的静态页面中，而是要做什么/要添加什么脚本/在哪里托管应用程序以及如何注入应用程序别人网站上的代码。这样某人就可以将脚本添加到他的静态网站，然后将我的组件添加到该网站。
听起来你正在尝试创建一个库？
我的任务是（给定一个工作后端）创建一个角度小部件，该小部件将显示来自该后端等的消息（如简化的邮件客户端），最好通过脚本标签（这是我不清楚的部分）。
好的，已经尝试了更多的东西，似乎足以动态添加与 ng build 捆绑的所有文件的 head 元素脚本标签 :) 编辑：这正是 vanelizarov 建议的，谢谢回答

【解决方案2】：

您可以使用 Angular 中的自定义元素来创建自定义组件，然后使用 npm run build 元素构建您的 projetc，它会为您生成一个脚本 .js，您的所有应用程序都将在其中构建。然后您可以将脚本注入任何其他项目或简单的 html 页面，它会加载您的应用程序。可能是我的解释不是很清楚，您可以在 Angular 主网站中看到自定义元素。

【讨论】：