如果你的angular项目部署到一个tomcat容器里面,localhost:8080是JavaWeb的主页,localhost:8080/driver/login是你angular2项目的登陆地址。第一遍跳转login页面,显示正常。但如果你刷新login页面,这会报一个404错误。为什么呢,因为你刷新后其实它走的是JavaWeb的路由了,在Java的路由下找不到这个路由地址,所以报错。这算是angular2的一个坑吧,网上搜了一下,发现这个遇到这个错误的人挺多的,但都没有给出解决办法,现把解决办法贴出来,希望能帮到一些遇到这个问题的程序猿们把!

解决办法:

解决angular2页面刷新后报404错误办法:
配置app.module.ts
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错误的更多相关文章

  1. 解决使用angular2路由后,页面刷新后报404错误。

    点击路由链接跳转页面是正常的,但是当刷新页面时就出现了404错误. 解决方法如下: 在app.module.ts中添加import: import {HashLocationStrategy,Loca ...

  2. Vue实现远程获取路由与页面刷新导致404错误的解决

    一.背景 先简单介绍一下现在项目情况:前后端分离,后端服务是Java写的,前端是Vue+ElementUI. 最近的一个需求是:通过后端Api去获取前端路由表,原因是每个登录角色对应的前端路由表可能是 ...

  3. AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题

    解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共 ...

  4. vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决

    一.vue 在nginx下页面刷新出现404 在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是 ...

  5. Vue项目build打包部署到Tomcat后,刷新报404错误解决方案

    问题描述: 一.更新依赖,并打包项目 cd /root/.jenkins/workspace/v-test;npm installcd /root/.jenkins/workspace/v-test; ...

  6. nignx部署Vue单页面刷新路由404问题解决

    官网说明: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E8%AD%A6%E5%91%8A 在linux下搭建ngi ...

  7. 解决Web部署 woff字体 404错误

    问题:刚刚在IIS上部署web项目的时候,发现浏览器总是报找不到woff字体的错误.导致浏览器加载字体报404错误. 原因:因为服务器IIS不认WOFF这个文件类型,只要在IIS上添加MIME 类型即 ...

  8. 结合sessionStorage解决vuex页面刷新数据丢失的问题

    将需要保存在vuex中的数据同时保存在sessionStorage中即可: import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); ...

  9. vue下history模式刷新后404错误解决

    官方说明文档: https://router.vuejs.org/zh/g... 一. 实测 Linux 系统 Apache 配置: 更改站点配置文件即可,我这里在 Directory 标签后面添加了 ...

随机推荐

  1. kettle初探

    Kettle是Pentaho的一个组件,主要用于数据库间的数据迁移,到我用过的4.2版,还不支持noSQL,不知道4.4是不是支持了. Kettle自己有三个主要组件:Spoon,Kitchen,Pa ...

  2. cocos2d-x之文件读写

    bool HelloWorld::init() { if ( !Layer::init() ) { return false; } auto fu=FileUtils::getInstance(); ...

  3. folly

    一.简介 Folly是,Facebook于2012年6月初开源的一个基于C++11的C++组件库,提供了类似Boost库和std库的功能,包括散列.字符串.向量.内存分配.位处理等,以满足大规模高性能 ...

  4. mod_rewrite

    一.简介 http://www.07fly.net/a/wangluobiancheng/Phpbiancheng/201501/58393.html   二.实现原理:       只有当用户的WE ...

  5. private成员变量真的私有吗?(用指针刨他祖坟)

    今天写程序时突然想到的,为什么不用指针去获取类的成员变量呢.于是做了这个实验.首先定义了一个类: class Test { private: int i; char c; int* p; public ...

  6. 用UNIX消息队列实现IPC(以ATM为例)

    清明假期三天没出寝室的门,先是把独立的博客折腾好了.域名备案还没好.域名是ilovecpp.com,意为“我爱C++”,好羞涩,掩面,逃:).话说cnblogs.com的界面好丑 .其余大部分时间就是 ...

  7. Unity3D 实现简单的语音聊天 [iOS版本]

    现在很多手机游戏中的聊天系统都加入语音聊天的功能,相比于传统的文字聊天,语音聊天在MMORPG中显得尤为重要,毕竟直接口头交流总比你码字快得多了,也更直观些. 实现语音聊天的方法很多,U3D中有不少第 ...

  8. List与Set的使用

    接口Collection: Collection是Java的一个集合框架, 也是一个根接口.JDK中没有提供此接口的任何实现,但是提供了更具体的子接口Set和List接口的实现,所有的Collecti ...

  9. 读高性能JavaScript编程学英语 第一章第三页第一段话

    When the browser encounters a <script> tag, as in this HTML page, there is no way of knowing w ...

  10. 用Python和摄像头制作简单的延时摄影

    “延时摄影(英语:Time-lapse photography)是以一种较低的帧率拍 下图像或者视频,然后用正常或者较快的速率播放画面的摄影技术.在一段延时摄影视频中,物体或者景物缓慢变化的过程被压缩 ...