角度アプリの静的HTMLでページを事前レンダリングする方法はありますか？

Question

WHAT：私はAngularでウェブサイトを構築しており、純粋に静的なサーバー（Amazon S3など）に展開したいと考えています。私は展開前にサイトのすべてのHTMLページを事前にレンダリングする必要があり、どのように進めるのか分かりません。私の現在の考えは、その後のNode.jsがインストールされているサーバーとのインスタンスにこれらのURLに対する要求を送信する、いくつかのクローラは、すべてのサイトのURLのリストを取得するためにsitemap.xmlようなファイルを読み込むことです：HOW

私のAngular（Universal）アプリが動作しています。

質問：それを行うには適切な方法のように聞こえますか？私は重要なステップを欠いていますか？この仕事に役立つライブラリやnpmパッケージはありますか？

驚いたことに、Angular（プレイングレンダリングのみ）のプレレンダリングに関するドキュメントはありませんでした。私はインスピレーションのために静的なサイトジェネレータも見てきましたが、スタティックファイルの束を出発点として使用しています（URLのリストではありません）。また、私はprerender.ioのようなサードパーティのサービスを使用したくありません。

Answer 1

私はちょうど角度4を使って同様のタスクを完了しました。サイトはGithubページを使用してホストされ、バックエンドはありません。 repoとプリレンダリングを実装するコミット：例として、それを使用してお気軽0d81d28

私は次の変更を実装する必要がありました：角度のユニバーサルガイドで説明したように

• は、サーバアプリモジュールとアップデートブラウザアプリモジュールを作成します。
• プリレンダラースクリプトを実装します。プリレンダラーはルータ設定を検査し、利用可能なアプリルートを検索します。
• URLごとに、renderModuleFactoryから@angular/platform-serverモジュールを使用してhtmlファイルを生成し、生成されたhtmlを適切な場所に保存します。
• Bhargavが述べたように、静的ファイルサーバーはURLをサポートしません。したがって、/community/overviewのようなURLが必要な場合は、htmlを/community/overview/index.htmlに保存する必要があります。行列のパラメータをURLルートに移動しなければならなかった。/docs;doc=overview.htmlの代わりに/docs/overview.html
• ページロード後のちらつきを修正するには、ルータ構成にinitialNavigation: 'enabled'を追加してください：RouterModule.forRoot([{ path: '', ...}], { initialNavigation: 'enabled' })。私はまだinitialNavigationが何で、なぜそれが助けになるのか分かりません。

これが役に立ちます。

Answer 2

すべてのhttp要求をルートindex.htmlに誘導する特別なホスティングサービスが必要です。すべてのヘッダーフッターとAngularまたはSPAスクリプトを含むファイル。そうでなければ、リフレッシュするか、 'your-site /'以外のurlに行くと、何らかの404エラーが発生します。

これは主に、フロントエンドルータがハッシュURL「your-site /＃/」を使用していない場合でもhtml5プッシュ状態を使用していても、ハッシュurl。サーバー環境が、すべてのhtmlまたは一致する要求のためにrootのindex.htmlファイルを提供することをサポートしていない限り。

上記の問題を回避する方法がありますが、私はそれをお勧めしません。サーブ環境サービスがこの機能をサポートしている場合、基本的に404ページに同じindex.htmlを再度配信します。

だから、基本的には、セットアップに独自のサーバーを必要とするか、または、そのような[アクロバット]などのサービスを使用します[1]

あなたは可能性が代わりに、このような角度の使用などSPAの枠組み静的サイトジェネレータを使用します。