解决angular2页面刷新后报404错误
如果你的angular项目部署到一个tomcat容器里面,localhost:8080是JavaWeb的主页,localhost:8080/driver/login是你angular2项目的登陆地址。第一遍跳转login页面,显示正常。但如果你刷新login页面,这会报一个404错误。为什么呢,因为你刷新后其实它走的是JavaWeb的路由了,在Java的路由下找不到这个路由地址,所以报错。这算是angular2的一个坑吧,网上搜了一下,发现这个遇到这个错误的人挺多的,但都没有给出解决办法,现把解决办法贴出来,希望能帮到一些遇到这个问题的程序猿们把!
解决办法:
import {PathLocationStrategy, LocationStrategy} from '@angular/common';
@NgModule({
declarations: [AppCmp],
bootstrap: [AppCmp],
imports: [BrowserModule, routes],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy]
]);
主要添加的代码:
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy]
这样设置后,访问angular站点,会自动在根节点后面加一个#锚点。再次刷新便不会报404错误了。

解决angular2页面刷新后报404错误的更多相关文章
- 解决使用angular2路由后,页面刷新后报404错误。
点击路由链接跳转页面是正常的,但是当刷新页面时就出现了404错误. 解决方法如下: 在app.module.ts中添加import: import {HashLocationStrategy,Loca ...
- Vue实现远程获取路由与页面刷新导致404错误的解决
一.背景 先简单介绍一下现在项目情况:前后端分离,后端服务是Java写的,前端是Vue+ElementUI. 最近的一个需求是:通过后端Api去获取前端路由表,原因是每个登录角色对应的前端路由表可能是 ...
- AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题
解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共 ...
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
一.vue 在nginx下页面刷新出现404 在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是 ...
- Vue项目build打包部署到Tomcat后,刷新报404错误解决方案
问题描述: 一.更新依赖,并打包项目 cd /root/.jenkins/workspace/v-test;npm installcd /root/.jenkins/workspace/v-test; ...
- nignx部署Vue单页面刷新路由404问题解决
官网说明: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E8%AD%A6%E5%91%8A 在linux下搭建ngi ...
- 解决Web部署 woff字体 404错误
问题:刚刚在IIS上部署web项目的时候,发现浏览器总是报找不到woff字体的错误.导致浏览器加载字体报404错误. 原因:因为服务器IIS不认WOFF这个文件类型,只要在IIS上添加MIME 类型即 ...
- 结合sessionStorage解决vuex页面刷新数据丢失的问题
将需要保存在vuex中的数据同时保存在sessionStorage中即可: import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); ...
- vue下history模式刷新后404错误解决
官方说明文档: https://router.vuejs.org/zh/g... 一. 实测 Linux 系统 Apache 配置: 更改站点配置文件即可,我这里在 Directory 标签后面添加了 ...
随机推荐
- 使用sysbench进行压力测试
sysbench是一款开源的多线程性能测试工具,可以执行CPU/内存/线程/IO/数据库等方面的性能测试.数据库目前支持MySQL/Oracle/PostgreSQL/Drizzle,它主要包括以下几 ...
- Core Data初试
CoreDataStack.swift import CoreData class CoreDataStack: NSObject { let context: NSManagedObjectCont ...
- 设计模式C#实现(八)——原型模式
原型模式:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.(要创建一个对象,这个对象为实现原型接口,方法是原型克隆.克隆只是方法而不是原型模式的目的,创建对象才是目的) UML类图: ...
- 烂泥:KVM利用LVM快照快速部署虚拟机
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 上一篇文章介绍了有关KVM利用LVM快照备份和恢复虚拟机的功能,这篇文章我们来介绍,如何利用LVM快照功能为KVM快速部署虚拟机. 部署虚拟机需要以下几 ...
- Merge Two Sorted Lists
Merge Two Sorted Lists https://leetcode.com/problems/merge-two-sorted-lists/ Merge two sorted linked ...
- Oracle 数据库优化-分析现有的sql
在做数据库sql优化时,首先要对现有的数据库sql进行优化,主要包括以下几种: 1.数据库正在执行的SQL是? 2.已经执行过得SQL是? 3.最耗时的的前几条SQL是? 4.最耗IO的SQL是? 5 ...
- A + B Problem II
之前总是在查阅别人的文档,看着其他人的博客,自己心里总有一份冲动,想记录一下自己学习的经历.学习算法有一段时间了,于是想从算法开始自己的博客生涯O(∩_∩)O~~ 今天在网上看了一道大数相加(高精度) ...
- java解惑 读书笔记
表达式之谜 >奇数性 当取余操作返回一个非0的结果.他与左操作数具有相同的正负符号. >找零谜题 在需要精确答案的地方,要避免使用float和double.对于货币运算.要使用int,lo ...
- python中list注意事项
今天写python出了一个小插曲,具体情况见代码: >>> a = [1,2,3] >>> import queue >>> q = queue. ...
- Android开发环境搭建(转)
转载:http://www.cnblogs.com/zoupeiyang/p/4034517.html#1 引言 在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想 ...