部署在 tomcat 服务器上的 angular(v4+) 刷新时出现 404 错误答案

【问题标题】：404 Error on refresh for angular(v4+) deployed on tomcat server部署在 tomcat 服务器上的 angular(v4+) 刷新时出现 404 错误
【发布时间】：2018-05-02 04:24:07
【问题描述】：

我已经部署了一个延迟加载的 Angular 应用程序。该应用程序在托管在 Github.io 域上时运行良好，但是当我使用 mobaxterm 在 tomcat 服务器上部署应用程序时出现错误。当页面重新加载或刷新时，应用会丢失路由状态并抛出 404 错误。

HTTP 状态 404 - /查询

输入状态报告

留言/询问

说明请求的资源不可用。

Apache Tomcat/7.0.72

控制台日志:: GET http://appv2.proctur.com/enquiry/addEnquiry 404（未找到）导航到http://appv2.proctur.com/enquiry/addEnquiry

如果我不刷新页面并一次性使用该应用程序，那么它可以，只是无法理解刷新时的问题。

PS:: 这是我第一次在 tomcat 服务器上托管 Angular 应用程序，如果我犯了任何愚蠢的错误，请告诉我。

为了更好地说明，我添加了我延迟加载模块的 routing.module.ts。这被导入 app.module.ts::

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: '/authPage', pathMatch: 'full' },
        { path: 'authPage', loadChildren: 'app/components/auth-page/auth-page.module#AuthPageModule' },
        { path: 'course', loadChildren: 'app/components/course/course.module#CourseModule' },
        { path: 'enquiry', loadChildren: 'app/components/enquiry/enquiry.module#EnquiryModule' },
        { path: 'student', loadChildren: 'app/components/students/student.module#StudentModule' },
    ])
],
exports: [
    RouterModule
]
})
export class AppRoutingModule {
}

【问题讨论】：

您使用哪种路由模式？喜欢html5？ hashbang ?我在您的网址中没有看到任何# / #!

标签： angular tomcat tomcat7 angular2-routing

【解决方案1】：

当 Angular 应用程序加载第一次 url 时，将从服务器提供服务。当您浏览页面时，它会在客户端处理。当您刷新页面时，请求将转到服务器（tomcat 或节点）。但是该路由的 url 在服务器上不存在。然后是404错误。可以通过 HashLocationStrategy 解决，在路由配置中添加 {useHash: true} 对象即。

RouterModule.forRoot(routes, {useHash: true})

【讨论】：

URL 在理解 +1 方面真的帮助了我很多 :)

【解决方案2】：

前面的答案是正确的，但是我们的 url-s 中并不需要哈希。问题如下：例如，如果我们有一个名为 '/users/all' 的路由，并在我们的应用程序中从 '/' 导航到那里，那完全没问题，因为 Angular 自己的路由器会解析该路由并显示页面，但如果我们直接去那条路线，例如在浏览器的地址栏中输入url，我们会得到404，为什么？因为您的服务器（在您的情况下为 tomcat）将尝试在其中找到一个名为“users”的文件夹和一个“all”文件，这显然是不存在的，因为它只是一个 Angular 路由，而不是里面的实际文件你的服务器系统。但是您可以通过某种方式配置您的服务器，它将回退到包含应用程序的 index.html 文件，因此页面将正确显示（在我们的示例中，服务器将返回 index.html，然后Angular 应用程序将运行并解析路由）。阅读更多关于此here 的信息。

【讨论】：

我想坚持，如果您担心 SEO，hashbang 方法是不值得的。如果我错了，请纠正我..

【解决方案3】：

Angular (2+) 支持两种类型的路由策略——HashLocationStrategy 和 PathLocationStrategy。 PathLocationStrategy 是使用 Angular CLI 构建应用程序时的默认配置。 PathLocationStrategy 比HashLocationStrategy 有很多优势，并且是文档here 中讨论的推荐配置。

PathLocationStrategy 的缺点是需要在服务器端进行特定的配置。如果服务器端不做这个配置，那么直接访问深度链接时会导致404。此配置还取决于正在使用的服务器。

用于解决在 apache tomcat 服务器 (8, 9) 上部署 Angular 应用程序（使用 PathLocationStrategy 路由）时的深层链接问题 -

在 server.xml 中配置 RewriteValve
在rewrite.config中写入重写规则

server.xml -

...
      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

        <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

...
      </Host>
...

rewrite.config - （注意 - /hello/ 是 Angular 应用在 tomcat 上的上下文路径）

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/hello/(.*) /hello/index.html

我在我的文章中记录了这个问题 - Fixing deep linking issue – Deploying angular application on Tomcat server

【讨论】：

【解决方案4】：

如果您定义 404 页面 Web.xml 文件，这也可以工作

<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>

所以刷新页面http://appv2.proctur.com/enquiry/addEnquiry 发现 404 错误重定向到 index.html 并在 anguler 端调用您的实际路线，然后它将转到正确的位置。

【讨论】：

【解决方案5】：

我通过在 Angular 项目中配置 web.xml 解决了我的问题

1 - 在src angular 文件夹中创建文件夹WEB-INF 并使用以下代码添加web.xml：

<web-app>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

2 - 修改angular.json搜索"assets"并添加"src/WEB-INF"如下：

  "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/WEB-INF"
            ],

3 - 使用此命令构建 Angular 项目：

ng build --prod

4 - 将index.html 中的<base href="/"> 在dist/index.html 中构建后修改为<base href="./">

5 -重启Tomcat Server

【讨论】：