mcpField
A
angular-resolvers

angular-resolvers

github.com/oguzhan18開発7179 回インストール31 週間前に更新
リポジトリ

angular-resolvers について

ルート遷移時にデータを読み込む Angular 開発者向けのリファレンススキルです。関数型リゾルバーの定義、ルートへの設定、コンポーネントでのデータ取得、エラー処理を説明します。

主な機能

  1. 01関数型ルートリゾルバー
  2. 02ルートへのリゾルバー設定
  3. 03コンポーネントでの解決済みデータ取得
  4. 04リゾルバーのエラー処理
  5. 05複数リゾルバーの設定

活用シーン

  1. 01ルート表示前にユーザーデータを読み込む
  2. 02ルートコンポーネントに解決済みデータを渡す
  3. 03読み込み失敗時に代替値を返す

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-resolvers

インストール後、Claude Code で/angular-resolversを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

詳細

Angular Route Resolvers

バージョン： Angular 21（2025） タグ： リゾルバー、ルーティング、データの読み込み

参考資料： リゾルバーガイド

ベストプラクティス

  • 関数型リゾルバーを作成する
export const userResolver: ResolveFn<User> = (route, state) => {
  const userService = inject(UserService);
  const userId = route.paramMap.get('id');
  return userService.getUser(userId!);
};
  • ルートでリゾルバーを使用する
const routes: Routes = [
  {
    path: 'user/:id',
    resolve: { user: userResolver },
    component: UserComponent
  }
];
  • コンポーネントで解決済みデータを取得する
@Component({})
export class UserComponent {
  private route = inject(ActivatedRoute);
  
  user = this.route.snapshot.data['user'];
  
  // Or with input binding (Angular 17+)
  userId = input<string>();
}
  • リゾルバーのエラーを処理する
export const dataResolver: ResolveFn<Data> = (route, state) => {
  const service = inject(DataService);
  return service.getData().pipe(
    catchError(() => of(null))
  );
};
  • 複数のリゾルバーを使用する
const routes: Routes = [
  {
    path: 'dashboard',
    resolve: {
      user: userResolver,
      settings: settingsResolver
    },
    component: DashboardComponent
  }
];

コメント

Markdown 対応