为 Angular 配置 history.pushState 2

Question

我的Angular2 应用程序使用默认的HTML 5 history.pushState location strategy。如何使用 history.pushState 配置服务器，以便浏览器刷新和浏览器 URL 不生成 404s？

例如，Tour of Heroes 申请有几种不同的申请途径，例如：

http://localhost:8080/dashboard
http://localhost:8080/heroes
http://localhost:8080/detail/13

如果您在这些路由之一上点击刷新，或键入其中一个 URL，您将得到 404，因为 /detail/13 是应用程序路由，而不是服务器资源。我已经在 index.html:

的 head 顶部配置了位置策略

<!doctype html>
<html>
<head>
  <base href="/">
  <meta charset="utf-8">
  <title>Tour of Heroes</title>

但是应该如何配置服务器才能将所有 URL 发送到我的应用程序而不是生成 404?

注意: 本题是对 and asking how to address this problem. For Firebase, there's this: and for Apache there's this: htaccess redirect for Angular routes.

题的补充

Answer 1

使用最新的 angular-cli 版本创建您的项目，他们在 beta.10 和 beta.14 之间更改了构建系统，从 SystemJS 更改为 Webpack。

在您的 app.module.ts 中使用 LocationStrategy 和 HashLocationStrategy class，如下面的代码示例所示。当您将应用程序部署到任何 http 服务器（如（nginx））时，它将解决任何特定路由上的刷新问题。

将这些 classes 添加到提供程序部分后，运行 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 { }

当您刷新时，它会在适当的位置重新加载。

另请查看了解更多信息。

希望对您有所帮助！

Answer 2

nginx

使用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
生产 HTTP 服务器

推送状态服务器

要使用pushstate-server:

pushstate-server /home/jan/tour-of-heroes

支持history.pushState
生产 HTTP 服务器

快递

使用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 服务器

http 服务器

使用http-server:

node http-server/bin/http-server /home/jan/tour-of-heroes

没有 history.pushState
生产 HTTP 服务器

实时服务器

使用live-server:

live-server --entry-file=index.html /home/jan/tour-of-heroes

支持history.pushState
开发 HTTP 服务器

ng 服务

使用ng serve:

ng serve -prod

或 ahead-of-time compilation:

ng serve -prod -aot

支持history.pushState
生产应用程序构建
开发 HTTP 服务器

为 Angular 配置 history.pushState 2

Configure history.pushState for Angular 2

angular2-routing

angular2-cli

angular

nginx

推送状态服务器

快递

http 服务器

实时服务器

ng 服务