Angular CLIを使用してガードを生成する方法

ターミナルまたはコマンドプロンプトを開き、Angularプロジェクトのルートディレクトリに移動します。
以下のコマンドを実行して、新しいガードを生成します。

ng generate guard guard-name

ここで、guard-nameは生成するガードの名前です。例えば、authという名前のガードを生成したい場合は、以下のようになります。

ng generate guard auth

上記のコマンドを実行すると、以下のようなファイルが生成されます。

src/app/guard-name.guard.ts: ガードの実装が含まれるファイル
src/app/guard-name.guard.spec.ts: ガードのテストが含まれるファイル

ガードの実装ファイル (guard-name.guard.ts) を開き、必要なロジックを追加します。たとえば、認証が必要なルートへのアクセス制御を行いたい場合は、CanActivate インターフェースを実装し、canActivate メソッド内で必要な認証チェックを行います。
ガードを使用するルートの設定を変更します。app-routing.module.ts ファイルを開き、ルート定義の中でガードを指定します。たとえば、以下のようになります。

import { GuardNameGuard } from './guard-name.guard';
const routes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [GuardNameGuard]
  },
  // 他のルート定義
];

ここで、protected パスへのアクセスには GuardNameGuard ガードが適用されるようになります。

以上で、Angular CLIを使用してガードを生成し、実装する方法について説明しました。これにより、ルートのセキュリティやアクセス制御を簡単に追加できます。必要に応じて、生成されたガードファイルをカスタマイズすることもできます。

この記事は、Angularプロジェクトでガードを生成・実装する方法についての手順とコード例を提供しています。セキュリティ関連の機能を実装する際に役立つでしょう。