我的Angular 2应用程序使用默认的HTML 5 history.pushState
location strategy。如何使用history.pushState
配置服务器,以便浏览器刷新,浏览器网址不生成404
?
例如,Tour of Heroes应用程序有一些不同的应用程序路径,如:
http://localhost:8080/dashboard
http://localhost:8080/heroes
http://localhost:8080/detail/13
如果您在其中一条路线上点击刷新,或者输入其中一个网址,那么您将获得404
,因为/detail/13
是应用程序路由,而不是服务器资源。我已在head
的{{1}}顶部配置了位置策略:
index.html
但是如何配置服务器以便将所有网址发送到我的应用程序而不是生成<!doctype html>
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>Tour of Heroes</title>
?
注意: 此问题是问题Angular 2 : 404 error occur when i refresh through Browser和Angular 2.0 router not working on reloading the browser要求如何解决此问题的补充。对于Firebase,有以下内容:When I refresh my website I get a 404. This is with Angular2 and firebase,对于Apache,请执行以下操作:htaccess redirect for Angular routes。
答案 0 :(得分:7)
使用nginx:
/etc/nginx/ngin.conf
location / {
root /home/jan/tour-of-heroes/;
index index.html index.htm;
}
error_page 404 =200 /index.html;
history.pushState
pushstate-server /home/jan/tour-of-heroes
history.pushState
使用express:
node express.js
其中express.js
:
var express = require('express'),
path = require('path'),
port = process.env.PORT || 8083,
app = express();
app.use(express.static(__dirname ));
app.get('*', function(request, response){
response.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(port);
history.pushState
使用http-server:
node http-server/bin/http-server /home/jan/tour-of-heroes
history.pushState
使用live-server:
live-server --entry-file=index.html /home/jan/tour-of-heroes
history.pushState
使用ng serve:
ng serve -prod
ng serve -prod -aot
history.pushState
答案 1 :(得分:3)
使用最新的angular-cli版本创建项目,他们将beta.10和beta.14之间的构建系统从SystemJS更改为Webpack。
在app.module.ts
中使用 LocationStrategy和HashLocationStrategy 类,如下面的代码示例所示。当您将应用程序部署到任何http服务器(nginx)时,它将解决您在任何特定路由上的刷新问题。
将这些类添加到提供程序部分后,运行ng serve
,您的应用程序根目录将在浏览器中显示为http://localhost:4200/#/
。
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
HttpModule,
RouterModule,
...
],
providers: [
...,
{provide: LocationStrategy, useClass: HashLocationStrategy}
],
bootstrap: [AppComponent]
})
export class AppModule { }
当你刷新时,它会重新加载到它的适当位置。
另请查看Angular 2.0 router not working on reloading the browser以获取更多信息。
希望有所帮助!