Angular 网页刷新时未找到Liberty应用程序获取404吗

我正在开发一个在WebSphereApplicationServerLiberty概要文件版本17.0.0.3下运行的应用程序和服务器。我在Angular 4中开发了web应用程序。只要我不尝试刷新/重新加载网页，一切正常。当我尝试重新加载网页时，我收到一个404未找到错误。我怀疑问题在于刷新时完整的url被传递到服务器。（见本·科尔对此帖子的回复：）

我的问题是，我不确定最好的方法是在应用程序代码的URL中插入哈希标记。我试图简单地将其添加到html中的routerLink值中，但url被编码，将哈希标记转换为%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>

版本

我的服务器url是：

http://localhost:9080/zss

。当我导航到我的仪表板时，url是：

http://localhost:9080/zss/dashboard

但是如果我尝试刷新这个网页，我会得到404未找到错误。

---

我想我需要让Angular应用程序导航到URL，比如：

http://localhost:9080/zss/#dashboard

但我不确定在哪里调整代码来实现这一点，也不确定如何克服出现的uri编码

我现在正在做一个使用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
/

---

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

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

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

app routing.module.ts

中切换路由器以使用

HashLocationStrategy

：

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

---

它将URL更改为在实际路径后包含一个#，并将角度路由放在后面（例如，

contextroot/detail/id

变为

contextroot/#/detail/id

），这更兼容，但删除了用服务器呈现页面替换应用程序中某些角度路由的功能。请参阅。

我不知道WAS，但您需要在该服务器上添加某种重写规则，以便它能够处理传递到主应用程序文件（index.hml）的路径！它就像一个符咒！非常感谢。顺便问一下，您是否有关于为WAS Liberty服务器定义web.xml的文档链接？我甚至不知道Liberty使用的web.xml.web.xml是JavaEE标准，所以这个文件可以在任何兼容JavaEE的应用服务器上移植。你可以在这里找到记录：谢谢。我试过了，成功了！由于我们预计不会有任何服务器呈现的页面，我想我更喜欢这样做。它似乎比必须点击服务器、产生未找到错误并重定向到web应用程序更有效。