Angular ng-build后放入Tomcat,刷新404,手动输入404

时间:2024-04-05 09:04:52

最近因为一些要求,需要将angular打包放入tomcat和后台丢入同一个地址下,发布后,访问网站,过程都正常,单当刷新网页的时候,就出现404页面

Angular ng-build后放入Tomcat,刷新404,手动输入404
同样,如果这个路由是你手动输入到浏览器的,也会跳转到404页面。

产生这样的原因,经过查资料也能发现,因为刷新页面、手动输入跳转寻找的都是 java web中的地址,自然是找不到的。

通过查询,看到的解决办法大致是两种:

1、

在NgModule中添加:   
providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy, }],
    如果你的服务也许在此,则:
providers: [DataService, { provide: LocationStrategy, useClass: HashLocationStrategy, }],
    另外需要引入:

import {HashLocationStrategy, LocationStrategy} from '@angular/common';

(引用:【Angular】——路由之刷新报404

2、
在app.moudule.ts中修改

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

(引用:Angular路由与导航

这两种的方法达到的都是一个效果,会在路由地址后面不上#,如图

Angular ng-build后放入Tomcat,刷新404,手动输入404

有了#这个锚点之后,页面刷新就不会报404的错误,在一定程度上解决了问题,但是如果你是手动输入的路由,

那还会继续进入404页面。

因此,这个问题可能不能单单从angular出发解决。从师弟那学来了另一个方法,直接修改tomcat的web.xml配置

找到Tomcat安装路径中的conf,修改web.xml

加上404页面跳转处理:

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

</error-page>

让tomcat对404问题进行处理,跳转会/index.html,即回到前台路由中,这时候就会自动在前台路由中查询,不管是刷新

还是手动输入都能跳转到正确的位置。

如果还有其他解决办法,欢迎讨论