Question

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

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

My 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编辑浏览器的历史记录和位置，以模拟页面之间的移动，即使它看起来只有一个真正的页面＆＃34; ;到浏览器/服务器。

当答案显示时，您刷新页面并且浏览器发出对其认为正在查看但实际上并不存在的资源的请求时，就会遇到困难。设置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。

WAS Liberty应用程序在网页刷新

2 个答案: