如何将 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文件夹。如果您使用带有 war 插件的 Gradle，它会直接进入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使用较旧锚点语法的 。路由放置在 URL 的哈希片段中。这意味着您不必设置错误页面，但这也意味着您将无法在未来无缝地用单独的页面替换深度路由——人们必须更新书签，如果他们有任何书签.

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

3. 确保 base-href 匹配。 确保base-hrefin 您index.html指向包含该 index.html 的路径以及您从构建中生成的 CSS 和 JS 文件。否则，您将不会注意到任何负载，并且您的网络检查器中会出现一堆 404。如果上下文根更改，则需要更新此值。我的 web 应用程序通常有上下文根目录/，它直接位于 index.html 下，所以我base-href的/.