web-dev-qa-db-ja.com

Angularでモジュールではなくコンポーネントを遅延ロードする方法はありますか？

遅延読み込みは一般的に使用される手法です。ただし、Angularでは、この手法の粒度レベルはモジュールレベルで停止するようです。

つまり、ブラウザにロードするモジュールmainがあり、特別な場合にはモジュールBとCとDを遅延ロードできることを意味します。

ウェブ上のほとんどすべてのチュートリアルで説明されています。ただし、コンポーネントを遅延的にロードする方法はありますか？

ユーザーがアプリケーション内に移動し、「請求書」リンクをクリックすると、URLが新しいルート/invoice/listとプログレスバーに読み込みが表示されます。HTMLとJSを含むinvoicesコンポーネントはブラウザ内に読み込まれ、メインモジュールに動的に登録され、関連するアウトレットに表示されます。それはAngularで可能ですか？

angularcomponentslazy-loadingangular-components
18
mohammad rostami siahgeli

コンポーネントの遅延読み込みはできません。この動作の理由は、角度の構造です。 angularのコンポーネントはモジュールの一部である必要があります。Angularモジュールは、内部に存在するすべてのコンポーネント、サービス、パイプなどを定義するコンテナです。アプリケーションdist、モジュールで宣言されたすべての依存関係が含まれてチャンク（トランスコードされたjsコード）になります。直接インポートされたすべてのモジュールが一緒にメインチャンクを形成します。それぞれのルートがヒットし、クライアントからの呼び出しが行われます。コンポーネントはチャンクを形成しないため、不可能です

8
shantanu kaushik

少しハック...しかし可能です（Angular（バージョン7以降）の将来のバージョンはより簡単なアプローチを実装します）

https://blog.angularindepth.com/dynamically-loading-components-with-angular-cli-92a3c69bcd28

0
Boban Stojanovski

現在（Angular 8の期間）、コンポーネントの遅延読み込みを簡単にする2つのサードパーティライブラリがあります。

注：これらのライブラリは両方ともNgModuleFactoryLoaderに基づいて構築されており、Angular 8で廃止されていますが、まだ代替手段はありません...

Angularチームは、Ivy（Angular 9？）を使用すると、コンポーネントの遅延読み込みが容易になるはずであると発表しましたが、これがどのように見えるかはまだ明らかではありません...

0
jbandi