5

我的 Angular 2 应用程序使用默认的HTML 5history.pushState 定位策略。如何配置服务器以history.pushState使浏览器刷新和浏览器 URL 不生成404s？

例如，英雄之旅应用程序有几个不同的应用程序路线，例如：

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

如果您在其中一个路由上点击刷新，或键入其中一个 URL，您将得到404因为/detail/13它是应用程序路由，而不是服务器资源。head我已经在我的顶部配置了位置策略index.html：

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

但是应该如何配置服务器，以便将所有 URL 发送到我的应用程序而不是生成一个404？

注意：这个问题是对问题Angular 2 的补充：当我通过浏览器刷新时发生 404 错误，并且Angular 2.0 路由器无法重新加载浏览器，询问如何解决这个问题。对于 Firebase，有这样的：当我刷新我的网站时，我得到一个 404。这是与 Angular2 和 firebase 一起使用的，对于 Apache 有这样的：htaccess redirect for Angular routes。

4

2 回答 2

7

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

表示

使用快递：

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 serve：

ng serve -prod

或提前编译：

ng serve -prod -aot
  • 支持history.pushState
  • 生产应用程序构建
  • 开发HTTP服务器
于 2016-10-20T14:08:42.013 回答
3

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

在您的代码示例中使用LocationStrategy 和 HashLocationStrategy类。app.module.ts当您将应用程序部署到任何 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 路由器无法重新加载浏览器以获取更多信息。

希望有帮助！

于 2016-10-20T08:13:57.677 回答