將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將其移動。