Angular2：2つの '根'が必要な場合の代替方法はありますか？

Question

私は自分自身にangular2を教えようとしています。私は、多くのサイトが持っているレイアウトの単純なアプリを書いています：ヘッダ（例：検索とロゴ）とコンテンツの本体。

私の問題は次のようなものです：例えばfacebookを読み込むと、まず粗いページレイアウト（空のdivsとcss）が表示され、非同期にコンテンツがロードされます。それはうれしいことです、あなたは少し待っていますが、少なくともあなたは何が起こっているかを見ています。

私の（facebookのような）セットアップを想像してみてください。私は同じことをしたい場合。あなたは、CSSを使ってdivをメインのhtmlページに置くと言います。そしてdivでそれぞれのコンポーネント（app）をロードします。

しかし、私が学んだ限り、ng2では単一のルートをブートストラップすることができます。別のヘッダコンポーネントとメインビューコンポーネントをロードする方法は？

あなたはそれらをインポートしてdivをルートテンプレートに入れて、ページレイアウトでアプリケーションを読み込むことができます。しかし、これは、アプリケーションがロードされるまでユーザーがブランクページを見る（または「読み込み中...」と表示される）という問題を示しています。視覚的にはあまり魅力的ではありません。

どうすればこの問題を回避できますか？

Answer 1

FOUCは、サーバーからアプリケーションを最初に読み込まない限り、あなたが遭遇するものです。スタックをサポートしている場合はangular-universalを調べて、サーバーがあなたのアプリケーションを計算し、既にコンパイルされたHTMLを提供できるようにします。しかし、FOUCを防止するための多くの方法の1つにすぎません。