angular - 如何将 Angular 与 Liberty WebSphere Server 结合使用

Question

我有一个项目在 Liberty WebSphere Server 17.0.0.2 上使用 AngularJS + JSP，现在我必须对其进行升级。该项目需要升级到 Angular 4 + Liberty，我不知道如何正确地进行升级。

我现在尝试的是:

使用 Angular-CLI 构建项目以生成 dist 文件夹。然后，我将 dist 放在 WEB-INF> views 上。我还对 spring-context.xml、web.xml 和 server.xml(在 Liberty 端)进行了引用，但在尝试访问 localhost:9090/AngularPoC/dist/index 时，我得到的只是一个 404 错误

提前谢谢你。

Answer 1

我将概述如何设置我的 Angular 应用程序以通过 (Open)Liberty 提供服务:

1. 将 ng build 命令的结果复制到 .war 文件的根目录。这意味着根据您的构建方式将其放在不同的位置。如果您正在使用 Eclipse/WDT，这可能意味着将输出设置为您的 WebContent 文件夹。如果您将 Gradle 与 war 插件一起使用，它会直接进入 src/main/webapp。虽然最初我使用 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，它使用较旧的 anchor 语法。路由放置在 URL 的散列片段中。这意味着你不必设置错误页面，但这也意味着你将无法在未来无缝地用单独的页面替换深层路由——如果人们有任何书签，他们将不得不更新书签.

   这是通过更新您的 app-routing.module.ts 文件以在导入行上指定 RouterModule.forRoot(routes, {useHash: true}) 来完成的。

3. 确保 base-href 匹配。确保 index.html 中的 base-href 指向包含该 index.html 以及从构建中生成的 CSS 和 JS 文件的路径。否则你会注意到没有任何加载并且你在你的网络检查器中得到一堆 404s。如果上下文根更改，则需要更新此值。我的 Web 应用程序通常有上下文根 / 和 index.html 直接在它下面，所以我的 base-href 是 /。