Angular2路由 上线后页面刷新后报404错误

点击路由链接跳转页面是正常的,但是当刷新页面时就出现了404错误。

解决方法如下:

在app.module.ts中添加import:

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

并在 providers下添加所引入的服务:

providers: [{provide: LocationStrategy,useClass: HashLocationStrategy}]

备注:

出现问题的原因:刷新页面时寻找的是java web中的地址,自然就找不到了。
---------------------------------------------------------------------------------------------

当点刷新的时候,浏览器是不明白,要先进入到localhost:8000的路由后,再找到相对应的参数,再找到相对应的产品,简单的说,浏览器没有那么智能.

如何解决: 比较简单,在app.module.ts文件加一个新的provide就好了.看如下代码:

 
providers: [ProduceShareService,HttpService,FileInputPluginService,
 
{provide: LocationStrategy,useClass:HashLocationStrategy}
 
],
然后重新编译,再重新上传就可以了!

重新上传的文件地址会多一个#号,这样就告诉浏览器要先进行路由再找相对应产品.

 

app-routing-modules-ts 

const config: ExtraOptions = {
  useHash: true,                    // 此项必须写,防止打包之后,刷新页面空白的状况。
  // useHash: false,
};

  

 
原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12604378.html