是自由应用程序在网页刷新中找不到404

Question

我正在开发一个在WebSphere Application Server Liberty Profile版本17.0.0.3下运行的应用程序和服务器。我已经在Angular 4中开发了Web应用程序。只要我不尝试刷新/重新加载网页，一切都可以正常运行。当我尝试重新加载网页时，我会收到一个未发现错误的404。我怀疑问题是完整的URL正在刷新时传递给服务器。(请参阅本·科尔(Ben Cole(对此帖子的回应：＃/url中的含义是什么？(

我的问题是，我不确定将主题标签注入应用程序代码中的URL的最佳方法。我尝试将其简单地将其添加到HTML中的RouterLink值中，但是URL已编码，将主题标签转换为％23，然后我的路由器不识别URL。

。

我的Angular 4应用程序使用 @Angular/Router的路线和鲁atermodule。例如，我的路线是这样定义的：

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应用程序导航到以下网址：http://localhost:9080/zss/#dashboard，但我不确定在哪里调整代码来执行此操作或如何克服发生的URI编码。

Answer 1

我现在正在使用自由和角度的项目，我们遇到了完全相同的问题。出现问题是因为Angular将所有内容都视为单页应用程序，并单独处理所有URL路由和导航。

当您刷新浏览器时，HTTP获取请求将发送到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重定向到应用程序root允许您继续使用HTML5 URL，但是如果出于某种原因或其他原因无法支持该历史API，则可以切换路由器以在app-routing.module.ts中使用HashLocationStrategy：

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

将URL更改为在真实路径之后包含＃并在此之后放置角路由的＃(例如contextroot/detail/id变为 contextroot/#/detail/id。(这是更兼容的页面。请参阅相关的角文档。