ツール拡張機能にモジュールを追加する

  • [アーティクル]
  • 適用対象:
    ✅ Windows Admin Center, ✅ Windows Admin Center Preview

この記事では、Windows Admin Center CLI で作成したツール拡張機能に空のモジュールを追加します。

環境を準備する

まだ行っていない場合は、ツール (またはソリューション) 拡張機能を開発する手順に従って環境を準備し、新しい空のツール拡張機能を作成します。

Angular CLI を使用してモジュール (およびコンポーネント) を作成します

Angular を初めて使用する場合は、Angular の Web サイトのドキュメントを読み、Angular および NgModule の詳細を確認することをお勧めします。 ガイダンスとして、NgModule に関するページを参照してください。

詳細については、以下を参照してください。

コマンド プロンプトを開き、プロジェクトでディレクトリを .\src\app に変更し、次のコマンドを実行します。このとき、(スペースは削除して) {!ModuleName} はモジュール名に置き換えます。

cd .\src\app
ng generate module {!ModuleName}
ng generate component {!ModuleName}
値 説明 例
{!ModuleName} モジュール名 (スペースを削除) ManageFooWorksPortal

使用例:

cd .\src\app
ng generate module ManageFooWorksPortal
ng generate component ManageFooWorksPortal

ルーティングの情報の追加

Angular を初めて使用する場合は、Angular でのルーティングとナビゲーションの詳細を確認することをお勧めします。 次のセクションでは、Windows Admin Center で拡張機能に移動し、ユーザー アクティビティに応じて拡張機能のビュー間を移動できるようにするために必要なルーティング要素を定義します。 詳細については、ルーティングのガイダンスに関するページを参照してください。

前の手順で使用したのと同じモジュール名を使用します。

新しいルーティング ファイルへのコンテンツの追加

  1. 前の手順で ng generate で作成したモジュール フォルダーを参照します。

  2. 次の名前付け規則に従い、新しいファイル {!module-name}.routing.ts を作成します。

    値 説明 ファイル名の例
    {!module-name} モジュール名 (小文字、スペースをダッシュに置換) manage-foo-works-portal.routing.ts

  3. このコンテンツを作成したファイルに追加します。

    import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { {!ModuleName}Component } from './{!module-name}.component';

const routes: Routes = [
    {
        path: '',
        component: {!ModuleName}Component,
        // if the component has child components that need to be routed to, include them in the children array.
        children: [
            {
                path: '',
                redirectTo: 'base',
                pathMatch: 'full'
            }
        ]
}];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class Routing { }

  4. 作成したファイル内の値を目的の値に置き換えます。

    値 説明 例
    {!ModuleName} モジュール名 (スペースを削除) ManageFooWorksPortal
    {!module-name} モジュール名 (小文字、スペースをダッシュに置換) manage-foo-works-portal

新しいモジュール ファイルへのコンテンツの追加

  1. 次の命名規則で見つかったファイル {!module-name}.module.ts を開きます。

    値 説明 ファイル名の例
    {!module-name} モジュール名 (小文字、スペースをダッシュに置換) manage-foo-works-portal.module.ts

  2. コンテンツをファイルに追加します。

    import { Routing } from './{!module-name}.routing';

  3. 追加したコンテンツ内の値を目的の値に置き換えます。

    値 説明 例
    {!module-name} モジュール名 (小文字、スペースをダッシュに置換) manage-foo-works-portal

  4. ルーティングをインポートするために Imports ステートメントを次のように変更します。

    元の値 新しい値
    imports: [ CommonModule ] imports: [ CommonModule, Routing ]

  5. import ステートメントがソースでアルファベット順になっていることを確認します。

新しいコンポーネント TypeScript ファイルにコンテンツを追加する

  1. 次の命名規則で見つかったファイル {!module-name}.component.ts を開きます。

    値 説明 ファイル名の例
    {!module-name} モジュール名 (小文字、スペースをダッシュに置換) manage-foo-works-portal.component.ts

  2. 次の例に一致するように、ファイルの内容を変更します。

    constructor() {
    // TODO
}

public ngOnInit() {
    // TODO
}

app-routing.module.ts を更新します

  1. ファイル app-routing.module.ts を開き、作成した新しいモジュールが読み込まれるよう、既定のパスを変更します。 path: ''のエントリを見つけ 、既定のモジュール loadChildren ではなくモジュールを読み込む更新を行います:

    値 説明 例
    {!ModuleName} モジュール名 (スペースを削除) ManageFooWorksPortal
    {!module-name} モジュール名 (小文字、スペースをダッシュに置換) manage-foo-works-portal 
        {
        path: '',
        loadChildren: 'app/{!module-name}/{!module-name}.module#{!ModuleName}Module'
    },

    更新された既定のパスの例を次に示します:

        {
        path: '',
        loadChildren: 'app/manage-foo-works-portal/manage-foo-works-portal.module#ManageFooWorksPortalModule'
    },

拡張機能を作成してサイドロードします

これで、拡張機能にモジュールが追加されました。 次に、Windows Admin Centerで拡張機能を作成してWindows読み込み、結果を確認できます。