ルートモジュールで他モジュール機能を使用する方法【即時ロード編】

ルートモジュールで他モジュール機能を使用する方法【即時ロード編】

どうもこんにちはコウヘイです。

本シリーズは、Angularについて完全初心者の私がAngularをある程度使えるようになるまで頑張るをテーマに日々の作業ログを記録する内容になります。



以下のような疑問を持ちました。


・モジュールの即時ロードの方法を知りたい。



今回はこういった疑問に答えます。

著者情報

この記事を書いている僕ですが、Javaをメインにバックサイド開発を7年ほど経験しています。
最近フロントサイドにAngular、バックサイドにSpringBootを使用したSPA(シングルページアプリケーション)を作成する案件で働き始めたので、Angular学習を開始しました。

こんな僕が解説していきます。

ルートモジュールで他モジュールの機能を使用する方法【即時ロード編】

モジュールの即時ロードの解説は以下です。

Angularで最初に読み込むコンテンツに、追加したモジュールが含まれる読み込み方法



ぶっちゃけ、モジュールの即時ロードは単純にルートモジュールのメタ情報であるimportsに追加したいモジュールを書くだけです。
後日モジュールの遅延ロードについて解説予定で、その比較のために作業ログを残しておきます。


今回は以前の記事で作成したUserモジュールにUserコンポーネントを作成して、ルートモジュールで使えるようにします。


手順は以下です。

手順①:Userコンポーネント作成
手順②:Userモジュールの変更
手順③:ルートモジュールの変更【即時ロード】
手順④:ルートコンポーネントの変更
手順⑤:動作確認



順に説明します。

手順①:Userコンポーネント作成

以下のコマンドでUserコンポーネントを作成します。

ng g c User



コマンドを実行すると以下のファイルが作成されます。

・src/app/user/user.component.ts
・src/app/user/user.component.html
・src/app/user/user.component.scss
・src/app/user/user.component.spec.ts



「src/app/user/user.component.ts」についてだけ、後で使用するので以下に記載しておきます。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

手順②:Userモジュールの変更

以下のようにUserモジュールを変更します。


※変更点は①~②です。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UserRoutingModule } from './user-routing.module';
import { UserComponent } from '../user/user.component';


@NgModule({
  declarations: [UserComponent], ・・・①
  imports: [
    CommonModule,
    UserRoutingModule
  ],
  exports:[UserComponent] ・・・②
})
export class UserModule { }



各変更点の説明は以下。

① Userモジュールのコンポーネントであることを宣言するために、declarationsに新しく作成したUserComponentを追加。※UserComponentを作成したタイミングで自動で追加されているはずです。

② 他のモジュールでも使用できるように、exportsにUserComponentを追加。

手順③:ルートモジュールの変更【即時ロード】

Userモジュールをルートモジュールで使用できるようにします。


※変更点は①~②です。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { UserModule } from "./user/user.module"; ・・・①

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    UserModule ・・・②
  ],
  exports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }



各変更点の説明は以下。

① Userモジュールをimportしています。

② importしたUserモジュールをルートモジュールで使用するために、importsにUserModuleを追加してます。



※遅延ロードでモジュールを使用したい場合は、後日作成予定の記事を参考にしてください。

手順④:ルートコンポーネントの変更

今回はルートコンポーネントでUserコンポーネントを表示するために、「user.component.html」を以下に書き換えます。

<app-user></app-user> ・・・①



変更点の説明は以下です。

① Userモジュールに属するUserコンポーネントを表示するために、「user.component.ts」の@Componentメタ情報である「selector」に記述した値「app-user」をHTMLのタグ名にして記載



以上で、Userモジュールの機能をルートモジュールでも使用できるようになりました。

手順⑤:動作確認

以下のコマンドでアプリケーションを起動します。

ng serve



正常にアプリケーションが起動したら、「http://localhost:4200/」にアクセスしてみます。




無事にUserモジュールのUserコンポーネントにアクセスできることを確認できました!




というわけで今回は以上です。

Angularについて、少しでも詳しくなれたなら幸いです。
私自身も発展途上なので一緒に学んでいきましょう!



おすすめ記事:無料あり:Angular学習におすすめの本【AngularJSとの違いに注意】