ホームページ > 記事 > ウェブフロントエンド > ルーティングを使用した Angular モジュールインスタンスの遅延読み込みの詳細な説明

ルーティングを使用した Angular モジュールインスタンスの遅延読み込みの詳細な説明

小云云オリジナル: 2018-01-24 15:54:241230ブラウズ

この記事では、ルーティングを使用して Angular モジュールの読み込みを遅延させる詳細な説明を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

Angular は非常にモジュール化されており、モジュール化の非常に便利な機能は、モジュールが遅延読み込みポイントとして機能することです。遅延読み込みとは、モジュールやそれに含まれるすべてのコンポーネントなどのリソースをバックグラウンドで読み込めることを意味します。この方法では、Angular は最初の画面でサーバーからすべてのファイルをダウンロードする必要がなく、要求するまで対応するモジュールをダウンロードしません。これは、パフォーマンスを向上させ、スクロールせずに見える部分の最初のダウンロードファイルサイズを削減するのに非常に役立ちます。そして簡単にセットアップできます。

ここでは、この機能がどのように機能するかを示すために簡単な例を使用します。アプリケーションを複数の異なるモジュールに分割し、必要に応じてそれらを遅延ロードします。

遅延ロードルートはルートモジュールの外部で定義する必要があるため、遅延ロードする必要がある関数を汎用モジュールに含める必要があります。

Angular CLI を使用してデモプロジェクトを作成します: Demo.

ng new demo

次に、デモフォルダーに移動します。必要なパッケージをインストールします。

npm i

インストール後、新しいモジュールショップを作成します。 Angular CLI では、ng はコマンドプロンプト命令で、g は特定のタイプの新しい項目を作成するために使用される生成を意味します。

shop という名前の新しいモジュールの作成:

ng g module shop

これにより、Angular プロジェクトの src/app ファイルの下に新しいフォルダーが作成され、shop.module.ts ドキュメントという名前のモジュール定義が追加されます。

次に、デフォルトのアプリモジュールと新しく作成したショップモジュールにコンポーネントを作成します。

ng g c home/home
ng g c shop/cart
ng g c shop/checkout 
ng g c shop/confirm

CLIはappモジュールにhome、shopモジュールにcart、checkout、confirmを割り当てます。例えば

この時のshop.module.tsの内容は以下の通りです。

import { NgModule } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;
import { CheckoutComponent } from &#39;./checkout/checkout.component&#39;;
import { CartComponent } from &#39;./cart/cart.component&#39;;
import { ConfirmComponent } from &#39;./confirm/confirm.component&#39;;

@NgModule({
 imports: [
  CommonModule
 ],
 declarations: [CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }

ルートコンポーネントを変更します

デフォルトで Angular CLI によって生成される app.component.ts コンポーネントは、Angular に関するいくつかの入門情報を含むアプリケーションのメインページです。必要なものに変更します。デフォルトで生成された app.component.html コンテンツを次のコンテンツに変更します。

<!--The content below is only a placeholder and can be replaced.-->
<h1>Lazy Load Module</h1>
<a [routerLink]="[&#39;/shop&#39;]" >Shop Cart</a>
<router-outlet>
</router-outlet>

ここにはプレースホルダーのルーターアウトレットが提供されており、各コンポーネントはその中に表示されます。

同時に、/shop/cart コンポーネントに直接移動するためのナビゲーションリンクが提供されます。

ルートの作成

ルートルート

まずルートルートを作成します。

アプリフォルダーに main.routing.ts という名前のルーティング構成ファイルを追加します。内容は以下の通りです:

import { Routes } from &#39;@angular/router&#39;;
// HomeComponent this components will be eager loaded
import { HomeComponent } from &#39;./home/home.component&#39;;

export const routes: Routes = [
  { path: &#39;&#39;, component: HomeComponent, pathMatch: &#39;full&#39; },
  { path: &#39;shop&#39;, loadChildren: &#39;./shop/shop.module#ShopModule&#39; },
  { path: &#39;**&#39;, component: HomeComponent }
];

このうち、ホームコンポーネントは通常通り事前にロードされます。

注意すべき点は次のとおりです:

1. モジュールのロードを遅らせるために、loadChildren を使用します。早期ロードで使用されるコンポーネントを使用する代わりに。
2. 早期ロードを避けるために、シンボルの代わりに文字列を使用します。

3. モジュールのパスを定義するだけでなく、モジュールのクラス名も指定します。

app.module.ts でルートルーティングを有効にします。主に、forRoot を使用してルートルートを有効にする必要があります。

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { HomeComponent } from &#39;./home/home.component&#39;;
import { routes } from &#39;./main.routing&#39;;
import { RouterModule } from &#39;@angular/router&#39;;

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes)
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

モジュールルーティング

モジュールルーティングを定義する

ショップモジュールの場合、ルートの定義に関して特別なことは何もありません。ここでは、shop.route.tsという名前のルート定義ファイルを定義できます。内容は次のとおりです。表示:

import { Routes } from &#39;@angular/router&#39;; 
import { CartComponent } from &#39;./cart/cart.component&#39;; 
import { CheckoutComponent } from &#39;./checkout/checkout.component&#39;; 
import { ConfirmComponent } from &#39;./confirm/confirm.component&#39;; 
export const routes: Routes = [   
     { path: &#39;&#39;, component: CartComponent },   
     { path: &#39;checkout&#39;, component: CheckoutComponent },  
     { path: &#39;confirm&#39;, component: ConfirmComponent } 
];

このルート定義を使用するには、モジュール定義ファイル shop.module.ts ファイルを変更する必要もあります。子ルートを有効にするには forChild を使用する必要があることに注意してください。

rreee

すべての準備が整いました。

遅延読み込みをテストします

今すぐアプリを起動します。

import { NgModule } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;
import { CheckoutComponent } from &#39;./checkout/checkout.component&#39;;
import { CartComponent } from &#39;./cart/cart.component&#39;;
import { ConfirmComponent } from &#39;./confirm/confirm.component&#39;;

import { routes } from &#39;./shop.routing&#39;; 
import { RouterModule } from &#39;@angular/router&#39;;

@NgModule({
 imports: [
  CommonModule,
  RouterModule.forChild(routes)
 ],
 declarations: [CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }

アプリケーションはデフォルトでポート 4200 で起動されます。ブラウザを開いて http://localhost:4200/

ホームページへのネットワークアクセスは次のとおりです。これにはコンテンツは含まれません。機能モジュールの。

まずネットワークリクエストの履歴をクリアします。

その後、リンクをクリックして/shop/cartにアクセスすると、遅延ロード機能モジュールを含む新しいスクリプトファイルがロードされることがわかります。

汎用モジュールのみがロードされます。

ルーティングを使用した Angular モジュール インスタンスの遅延読み込みの詳細な説明

関連記事

ルーティングを使用した Angular モジュールインスタンスの遅延読み込みの詳細な説明