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

问题描述

我已经部署了一个延迟加载的 Angular 应用程序.该应用程序在 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 -/enquiry

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 服务器上托管 Angular 应用程序，如果我犯了任何愚蠢的错误，请告诉我.

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 {
}

推荐答案

当 Angular 应用首次加载 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屋！