如何将 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 方面），但在尝试访问 [=28 时我得到的只是 404 错误=]/AngularPoC/dist/index

提前致谢。

Answer 1

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

将 ng build 命令的结果复制到 .war 文件的根目录。 这意味着根据您的构建方式将其放在不同的位置。如果您使用 Eclipse/WDT，这可能意味着将输出设置为您的 WebContent 文件夹。如果您将 Gradle 与 war 插件一起使用，它会直接进入 src/main/webapp。虽然最初我用 ng build --output-dir=... 设置了输出文件夹，但我发现这会删除文件夹，所以我在每次构建时都会丢失 web.xml。我建议在构建的后续步骤中复制 dist 的内容，除非您可以从上下文根目录的子文件夹中提供服务。
为深层链接设置错误重定向。 如果您使用 Angular 路由器模块，您将需要设置链接和刷新深层路由。默认情况下，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}) 来完成的。
确保 base-href 匹配。 确保 index.html 中的 base-href 指向包含 index.html 的路径以及生成的 CSS 和 JS 文件。否则你会注意到没有任何加载并且你在你的网络检查器中得到一堆 404s。如果 context-root 发生变化，则需要更新此值。我的网络应用通常有 context-root / 和 index.html 正下方，所以我的 base-href 是 /.

如何将 Angular 与 Liberty WebSphere Server 一起使用

How to use Angular with Liberty WebSphere Server

websphere-liberty

angular

open-liberty

jakarta-ee