web-dev-qa-db-ja.com

Angular 6+の静的HTMLページへのルーティング

Angular 3つのコンポーネントの国、地域、家のプロジェクトがあります。ホームページをロードすると、ルートのハイパーリンクであるHomeComponentへのルートが設定されます。すべてが正しく機能します。単一のページ（SPA）のように正常に動作します。次に、静的なHTMLページを追加してそこにルーティングします。 Angular Route のドキュメントを調べましたが、これを行う方法が見つかりませんでした。ここに私が持っている質問があります

  1. 静的HTMLページはどこに配置できますか
  2. これらのファイルをapp-routing.module.tsでルーティングする方法

Githubリポジトリ： SpringTestingUI

angularangular-routingangular-router
9
Jadda

これについて少し遅れて、Angular to static html generator）を探し回っていて、これに出くわし、私がポップインすると思いました。実際にこれを正確に行う方法を今日学びました。

静的HTMLページは、基本的にはスタイルシートや画像などの別の静的アセットと同じなので、これらのページをまったく同じように扱うことができます。

Angular asset configuration docs に続いて、htmlファイルを作成し、必要に応じて.angular-cli.jsonまたはangular.jsonを介してアプリケーションでそれらを参照できます。

私が特に便利だと思ったのは、ブラウザーで解決されたHTMLページの参照パスを手動で構成できることでした。

たとえば、ディレクトリsrc/static-pages/page1.htmlにHTMLがある場合、デフォルトでは、そのパスをangular.jsonのassetsセクションに追加すると、ルートhttp://hostname/static-pages/page1.htmlに存在します。 Angularを使用すると、静的HTMLまたは他のアセットを参照するときに、Assetsセクションにいくつかの追加情報を提供することにより、このアセットの解決パスを任意に変更できます。

例：

// angular.json

{
   ...

   "assets": [
       // This page is routed /static-pages/page1.html
       "src/static-pages/page1.html",

       // This page is routed /home/page1.html
       { "glob": "page1.html", "input": "src/static-pages/", "output": "/home/" }
   ],

   ...
}

これを実行することと、静的なhtmlのみをレンダリングするビジュアルコンポーネントを作成することの主な違いは、これにより、Webクローラーがそのhtmlページにインデックスを作成できるようになることです。単に静的なHTMLテキストをレンダリングしたいだけの場合は、Angularで追加のSPAコンポーネントを作成し、HomeComponentで通常どおりルーティングを行います。

9
Tony M