如何将 angular 4 webapp 集成到另一个 webapp（jsp 样式）中？

【问题标题】：How to integrate angular 4 webapp inside another webapp (jsp style)?如何将 angular 4 webapp 集成到另一个 webapp（jsp 样式）中？
【发布时间】：2017-11-08 17:41:44
【问题描述】：

我有一个部署在 tomcat 7 上的旧 webapp，我想用 angular 4 创建一个新部分。为了进行一些测试，我在 webapps/project 中放置了一个带有 index.html <base href="."> 的 dist 文件夹文件夹并在现有 webapp 的 html 中添加一个 iframe，iframe 包含一个

<html>
<body>

   <app-root></app-root> 
</body>
</html>

但是 iframe 中显示了任何内容。如果我检查代码仅显示代码：

 <html>
<body>

   <app-root></app-root> 
</body>
</html>

有人知道怎么实现吗？

【问题讨论】：

标签： angular jsp web-applications

【解决方案1】：

要使用 SystemJS，您可以使用本教程：

Angular 4 in jsp with SystemJS

使用 webpack，您应该导入 index.html 下的所有 js 和 css dist 文件夹，如下所示：

<html>
<head>
<script type="text/javascript" src="../angularWeb/dist/inline.136b795d1580a6687eae.bundle.js"></script>
<script type="text/javascript" src="../angularWeb/dist/polyfills.8eba0ab53b5457105d75.bundle.js"></script>
<script type="text/javascript" src="../angularWeb/dist/vendor.091a5f9daa5d2223e9cf.bundle.js"></script>
<script type="text/javascript" src="../angularWeb/dist/main.b235b84cde360ec37e99.bundle.js"></script>

<link href="../angularWeb/dist/styles.f6578a3761ef80039afc.bundle.css" rel="stylesheet"/>
</head>
<body>
    <app-root></app-root>
</body>
</html>

是 dist/index.html 的复制粘贴。并将Angular项目的所有文件放在webapp文件夹下。

【讨论】：