404在tomcat服务器上部署的角度(v4 +)刷新时出错

Question

我已经部署了一个带有延迟加载的角度应用程序.该应用程序在Github.io域上托管时工作正常,但是当我使用mobaxterm在tomcat服务器上部署应用程序时出现错误.当页面重新加载或刷新时,应用程序将丢失路由状态并引发404错误.

HTTP状态404 - /查询

类型状态报告

消息/查询

description请求的资源不可用.

Apache Tomcat/7.0.72

Console-Log :: GET http://appv2.proctur.com/enquiry/addEnquiry 404(未找到)导航至http://appv2.proctur.com/enquiry/addEnquiry

如果我不刷新页面并一次性使用该应用程序就可以了,只是无法理解刷新时的问题.

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

为了更好地澄清,我添加了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 {
}

Answer 1

当角度应用加载第一次网址将从服务器提供时.当您导航页面时,它会在客户端处理.刷新页面时,请求将转到服务器(tomcat或节点).但该路由的URL在服务器上不存在.然后是404错误.您可以通过HashLocationStrategy解决,在路由配置中添加{useHash:true}对象,即.

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

更多细节: - https://codecraft.tv/courses/angular/routing/routing-strategies/#_hashlocationstrategy

Answer 2

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

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

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

1. 在 server.xml 中配置 RewriteValve
2. 在 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 中记录了这个问题

Answer 3

如果您定义 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 端调用您的实际路线，然后它将转到正确的位置。

Answer 4

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

1 -WEB-INF在角度文件夹内创建文件夹src并添加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 -使用此命令构建角度项目：

ng build --prod

4 -构建后修改<base href="/">为index.htmldist/index.html<base href="./">

5 -重新启动Tomcat Server

Answer 5

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