5

私の Angular 2 アプリケーションは、デフォルトのHTML 5history.pushState ロケーション戦略を使用しています。history.pushStateブラウザの更新とブラウザの URL が を生成しないようにサーバーを構成するにはどうすればよい404ですか?

たとえば、Tour of Heroesアプリケーションには、次のようないくつかの異なるアプリケーション ルートがあります。

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 が返されます。

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(nginx) のような任意の http サーバーにアプリケーションをデプロイすると、特定のルートで更新の問題が解決されます。

これらのクラスをプロバイダー セクションに追加した後、実行すると、アプリケーション ルートがブラウザーで次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 に答える