WAS Liberty应用程序在网页刷新时获得404 Not Found

Question

我正在开发一个在Websphere Application Server Liberty概要文件版本17.0.0.3下运行的应用程序和服务器。我已经在Angular 4中开发了Web应用程序。只要我不尝试刷新/重新加载网页，一切都运行良好。当我尝试重新加载网页时，收到404 Not Found错误。我怀疑问题是在刷新时将完整的URL传递给服务器。 （见Ben Cole对这篇文章的回应：What does #/ means in url?）

我的问题是我不确定将标签注入应用程序代码中的URL的最佳方法是什么。我试过简单地将它添加到html中的routerLink值，但是url被编码，将hashtag转换为％23，然后我的路由器无法识别url。

我的Angular 4应用程序使用来自@ angular / router的Routes和RouterModule。例如，我的路由定义如下：

const routes: Routes = [
{
    path: '', component: LayoutComponent,
    children: [
        { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
        { path: 'versions', loadChildren: './versions/versions.module#VersionsModule' }
  ]
}

在我的HTML中，我以这种方式导航到他们：

<a [routerLink]="['/versions']" 
   [routerLinkActive]="['router-link-active']" class="list-group-item">
                        <i class="fa fa-fw"></i>Versions</a>

我的服务器网址是：http://localhost:9080/zss。当我导航到我的仪表板时，网址是：http://localhost:9080/zss/dashboard但是如果我尝试刷新此网页，则会收到404 Not Found错误。我想我需要让Angular应用程序导航到以下网址：http://localhost:9080/zss/#dashboard但我不知道在哪里调整代码来执行此操作或如何克服发生的uri编码。

Answer 1

我现在正在开发一个使用Liberty和Angular的项目，我们遇到了完全相同的问题。出现此问题的原因是Angular将所有内容视为单个页面应用程序，并自行处理所有URL路由和导航。

当您刷新浏览器时，HTTP get请求将被发送到Liberty服务器，类似于http://localhost:9080/zss/dashboard，Liberty不知道如何处理，因为除了/zss/路径之外的所有内容都由Angular处理。

为了解决这个问题，我们提供了一个web.xml（位于webapp的WEB-INF /文件夹中），其中包含以下内容：

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
         http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

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

这解决了这个问题，因为它将所有404错误重新路由到应用程序的根目录，从而允许Angular处理路由。

Answer 2

为了扩展已接受的答案，Angular利用HTML5编辑浏览器的历史记录和位置，以模拟页面之间的移动，即使它看起来只是浏览器/服务器的一个真实“页面”。

当答案说，您刷新页面并且浏览器发出对它认为正在查看的资源的请求时出现困难，而实际上并不存在。设置web.xml以将所有404重定向到应用程序根允许您继续使用HTML5 URL，但如果由于某种原因无法支持该历史API，则可以切换路由器以在HashLocationStrategy中使用app-routing.module.ts：

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })
  ], 

这会更改URL以在实际路径后包含＃并在此之后放置角度路径（例如contextroot/detail/id变为contextroot/#/detail/id。）这更兼容，但无法使用服务器呈现的页面替换应用中的某些角度路线。见relevant Angular documentation。