将Angular 7与现有Java应用程序集成

Question

我是新手。 我当前的应用程序是使用YUI库在Java和JSP中构建的。 在我们的应用程序中，我们有多个选项卡。 最初是否有可能使用一个或两个选项卡使用相同的应用程序切换到Angular 7，或者我们需要从新项目开始。

请提出建议。

Answer 1

是的，这是可行的，因为Angular可以从JSP页面进行引导。 这是在过渡到Angular时保持当前应用程序运行的好方法。 这样，您可以减少对旧选项卡的维护，因为它们可以更快地删除，而保留在JSP中的选项卡可以继续工作。

首先，将Angular应用程序根目录和所有捆绑软件包括在要替换的选项卡的JSP中。

<app-root></app-root>

<!-- Angular must load AFTER the app-root selector for bootstrapping  -->
<% if( request.getHeader("Host").equals("localhost:4200") ) { %>
  <!-- dev bundles, to allow the normal angular workflow on localhost -->
  <script src="inline.bundle.js"></script>
  <script src="polyfills.bundle.js"></script>
  <script src="styles.bundle.js"></script>
  <script src="vendor.bundle.js"></script>
  <script src="main.bundle.js"></script>
<% } else { %>
  <!-- production bundles -->
  <script src="inline.bundle.js?ver=${maven.build.timestamp}"></script>
  <script src="polyfills.bundle.js?ver=${maven.build.timestamp}"></script>
  <script src="main.bundle.js?ver=${maven.build.timestamp}"></script>
<% } %>

这假定您使用maven来构建Java项目，因此请关闭ng build进行的文件版本控制，然后让maven处理版本命名（以避免发布版本时出现缓存问题）。 否则，您将不得不想出一种方法来将每个生成的Angular生成的文件名插入到JSP中。

ng build --prod --output-hashing none

一旦引导了应用程序根目录，只要您确保没有将其从DOM中删除，就可以使用其他JavaScript将其移动。