web-dev-qa-db-ja.com

Angular 2 URLからハッシュ（＃）を削除

Angular 2のURLから＃記号を削除しようとしていますが、問題なく生成する方法についての良い説明が見つかりませんでした。

AngularJS 1では、$locationProvider.html5Mode(true);を追加する方が簡単だったのを覚えています

また、これが良い方法（＃を削除）であるか、アプリケーションのSEOに影響する（または改善する）かどうかを教えていただければ幸いです。

PS：TypeScriptでAngular 2を使用しています

html5angulartypescript
51
jorgevasquezang

@Volodymyr Bilyachatが指摘したように、Angular2ではPathLocationStrategyがデフォルトの ロケーション戦略 であり、#がURLに存在する場合、どこかでオーバーライドされているに違いありません。

モジュールプロバイダーの横で、モジュールのインポートを確認します。また、{ useHash: true }の2番目の引数としてRouterModule.forRootを指定することでオーバーライドできます。

imports: [
    ...
    RouterModule.forRoot(routes, { useHash: true })  // remove second argument
]

PathLocationStrategyを使用する場合、リクエストされたすべての場所に対してindex.html（アプリのエントリポイント）を提供するようにWebサーバーを構成する必要があることにも注意してください。

83
Seid Mehmedovic

angularには ロケーション戦略 があります

あなたが持っているアプリがそこにブートストラップされているapp.module.tsを見てください

@NgModule({
.......
  providers: [
....
    { provide: LocationStrategy, useClass: HashLocationStrategy },
....
]
});

PathLocationStrategyは デフォルト戦略 であるため、この部分を削除します

28
Volodymyr Bilyachat

上記の回答には、URLからハッシュを削除するための正しい説明がありますが、LocationStrategyを変更すると、バックエンドがAngular 2ルートのすべてを理解しないため、バックエンドが影響を受けます。バックエンドサポートでハッシュを削除する手順は次のとおりです。

1）Angularを変更してPathLocationStrategyを使用します

@NgModule({
  .....
  providers: [
    // Below line is optional as default LocationStrategy is PathLocationStrategy
    {provide: LocationStrategy, useClass: PathLocationStrategy} 
  ]
})

2）index.htmlのベースHrefを変更します。Angular2はベースHref以降のすべてのルートを処理します

<base href="/app-context/">

例えば

<base href="/app/">

3）バックエンドサーバーで、以下のパターンで送信されるリクエストのindex.htmlファイルをレンダリングする必要があります

"/app/**" - Render index.html for any request coming with "/app/**" pattern

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <base href="/app/">
  </head>
  <body>
    <app-root>Loading...</app-root>
    <script type="text/javascript" src="vendor.bundle.js"></script>
    <script type="text/javascript" src="main.bundle.js"></script>
  </body>
</html>
18
jonuojha