Question

长时间潜伏，第一次问：）

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

发现了一些博客文章，但他们都在使用SystemJS，我的应用程序正在使用webpack，似乎没有结果。

感谢您的帮助！

编辑：问题解决了，感谢所有贡献：）

Answer 1

Angular app必须始终包含root元素，该元素通常插入index.html的{{1}}。假设您已经编写了小部件，其中的根组件为f.e.是<body>，您可以将其与页面上的任何静态标记混合使用：

<widget>

如果你的应用程序是使用Angular CLI引导的，那么引擎盖使用webpack，只需将你的静态标记放在src / index.html中就可以了。

已修改：如果您想将窗口小部件注入任何其他页面，可以尝试按照以下步骤执行此操作：

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

有点像：

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

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

Answer 2

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

使用角度4组件作为小部件（在静态网站上）

2 个答案: