如何将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是/ 。