如何將Angular與Liberty WebSphere Server一起使用

Question

我有一個在Liberty WebSphere Server 17.0.0.2上使用AngularJS + JSP的項目，現在我必須對它進行升級。 該項目需要升級到Angular 4 + Liberty，我不知道如何正確地完成它。

我現在嘗試的是：

使用Angular-CLI構建項目以生成dist文件夾。 然后，我把dist放在WEB-INF > 視圖上 。 我還在spring-context.xml，web.xml和server.xml（在Liberty端）上做了引用，但是當我嘗試訪問localhost時，我得到的是404錯誤：9090 / AngularPoC / dist / index

先感謝您。

Answer 1

我將概述如何通過（Open）Liberty設置我的Angular應用程序：

1. 將ng build命令的產品復制到.war文件的根目錄。 這意味着根據您的構建方式將其放在不同的位置。 如果您使用的是Eclipse / WDT，則可能意味着將輸出設置為WebContent文件夾。 如果你正在使用帶有war插件的Gradle，它會直接進入src/main/webapp 。 雖然我最初使用ng build --output-dir=...設置輸出文件夾ng build --output-dir=...我發現這會刪除文件夾，因此我在每次構建時丟失了我的web.xml。 我建議在構建的后續步驟中復制dist的內容，除非您可以從上下文根的子文件夾中提供服務。

2. 為深層鏈接設置錯誤重定向。 如果使用Angular Router模塊，則需要設置鏈接和刷新深層路由。 默認情況下，Liberty為任何不存在的路徑提供404錯誤頁面。 如果用戶在URL欄包含進入應用程序的深層路徑時刷新頁面，他們將獲得該錯誤頁面。 您需要對其進行設置，以便將所有404請求路由回index.html （ location通常應指向與base-href相同的位置，請參閱下文。）在web.xml中，我有

    <error-page> <error-code>404</error-code> <location>/</location> </error-page> 

   另一種選擇是使用HashLocationStrategy ，它使用較舊的錨語法。 路由放在URL的哈希片段中。 這意味着您不必設置錯誤頁面，但這也意味着您將來無法使用單獨的頁面無法替換深層路由 - 如果有任何書簽，人們將不得不更新書簽。

   這是通過更新app-routing.module.ts文件以在導入行上指定RouterModule.forRoot(routes, {useHash: true})來完成的。

3. 確保base-href匹配。 確保index.html的base-href指向包含該index.html的路徑以及從構建中生成的CSS和JS文件。 否則你會發現沒有任何負載，你的網絡檢查員會得到一堆404。 如果context-root發生更改，則需要更新此值。 我的網絡應用程序通常直接使用context-root / index.html，所以我的base-href是/ 。