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

问题描述 投票：6回答：3

我已经部署了一个带有延迟加载的角度应用程序。该应用程序在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 {
}
angular tomcat tomcat7 angular2-routing
3个回答
10
投票

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

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

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

5
投票

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

0
投票

Angular（2+）支持两种类型的路由策略 - HashLocationStrategy和PathLocationStrategy。使用angular CLI构建应用程序时，PathLocationStrategy是默认配置。 PathLocationStrategy比HashLocationStrategy有很多优点，是推荐的配置，在文档here中讨论。

PathLocationStrategy的缺点是它需要在服务器端完成特定配置。如果此配置未在服务器端完成，则在直接访问深层链接时会导致404。此配置还取决于正在使用的服务器。

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

  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 /是tomcat上角度应用程序的上下文路径）

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

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

0
投票

如果你定义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并在痛苦方面调用你的实际路线然后它会去正确的位置。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.