Loading...
Loading...
ALWAYS use when working with Angular Route Resolvers, data pre-fetching, or loading data before route activation.
npx skill4agent add oguzhan18/angular-ecosystem-skills angular-resolversexport 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
}
];