Angular 2のURLから#記号を削除しようとしていますが、問題なく生成する方法についての良い説明が見つかりませんでした。
AngularJS 1では、$locationProvider.html5Mode(true);
を追加する方が簡単だったのを覚えています
また、これが良い方法(#を削除)であるか、アプリケーションのSEOに影響する(または改善する)かどうかを教えていただければ幸いです。
PS:TypeScriptでAngular 2を使用しています
@Volodymyr Bilyachatが指摘したように、Angular2ではPathLocationStrategy
がデフォルトの ロケーション戦略 であり、#
がURLに存在する場合、どこかでオーバーライドされているに違いありません。
モジュールプロバイダーの横で、モジュールのインポートを確認します。また、{ useHash: true }
の2番目の引数としてRouterModule.forRoot
を指定することでオーバーライドできます。
imports: [
...
RouterModule.forRoot(routes, { useHash: true }) // remove second argument
]
PathLocationStrategy
を使用する場合、リクエストされたすべての場所に対してindex.html
(アプリのエントリポイント)を提供するようにWebサーバーを構成する必要があることにも注意してください。
上記の回答には、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>