Angularng-build后放入Tomcat,刷新404,手动输入404(实例讲解)
最近因为一些要求,需要将angular打包放入tomcat和后台丢入同一个地址下,发布后,访问网站,过程都正常,单当刷新网页的时候,就出现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路由与导航)
这两种的方法达到的都是一个效果,会在路由地址后面不上#,如图
有了#这个锚点之后,页面刷新就不会报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,即回到前台路由中,这时候就会自动在前台路由中查询,不管是刷新
还是手动输入都能跳转到正确的位置。
如果还有其他解决办法,欢迎讨论