在Tomcat服务器上部署的angular(v4 +)刷新时出现404错误 [英] 404 Error on refresh for angular(v4+) deployed on tomcat server

问题描述

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

I have deployed an angular application with lazy loading. The application works perfectly when hosted on Github.io domain but I am getting an error when I deployed the app on tomcat server using mobaxterm. When the page reloads or refreshes the app loses the routing state and throws a 404 error.

HTTP状态404-/查询

HTTP Status 404 - /enquiry

类型状态报告

消息/查询

说明所请求的资源不可用.

description The requested resource is not available.

Apache Tomcat/7.0.72

Apache Tomcat/7.0.72

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

Console-Log:: GET http://appv2.proctur.com/enquiry/addEnquiry 404 (Not Found) Navigated to http://appv2.proctur.com/enquiry/addEnquiry

如果我不刷新页面并立即使用该应用程序，那么它的确定就可以了，只是无法理解刷新时出现的问题.

If I do not refresh the page and use the app in one go then its OK, just fail to understand what the issue is on refresh.

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

PS:: this is my first time hosting an angular application on tomcat server if I made any silly mistake please let me know.

为了更好的说明，我在懒加载模块的地方添加了routing.module.ts.这被导入到app.module.ts ::

For better clarification, I am adding the routing.module.ts where I lazy load the modules. This is imported into 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 {
}

推荐答案

角度应用加载时，首次url将从服务器提供.当您浏览页面时，它将在客户端进行处理.当您刷新页面时，请求将转到服务器(tomcat或节点).但是该路由的url在服务器上不存在.然后出现404错误.您可以通过HashLocationStrategy解决，在路由配置中添加了{useHash:true}对象.

When angular app load first-time url will serve from a server. when you navigate pages then it handled at client side. when you refresh the page then request will go to server(tomcat or node). but that routed url doesn't exist on server. then comes 404 error. you can resolve by HashLocationStrategy, added {useHash: true} object in routing configuration ie.

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

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

这篇关于在Tomcat服务器上部署的angular(v4 +)刷新时出现404错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！