Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

Resolve

Interface that classes can implement to be a data provider. A data provider class can be used with the router to resolve data during navigation. The interface defines a resolve() method that is invoked right after the ResolveStart router event. The router waits for the data to be resolved before the route is finally activated.

See more...

Deprecated: Class-based Route resolvers are deprecated in favor of functional resolvers. An injectable class can be used as a functional guard using the inject function: resolve: {'user': () => inject(UserResolver).resolve()}.

      
      interface Resolve<T> {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): MaybeAsync<T> }

See also

Description

The following example implements a resolve() method that retrieves the data needed to activate the requested route.

      
      @Injectable({ providedIn: 'root' })
export class HeroResolver implements Resolve<Hero> {
  constructor(private service: HeroService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<Hero>|Promise<Hero>|Hero {
    return this.service.getHero(route.paramMap.get('id'));
  }
}
    

Here, the defined resolve() function is provided as part of the Route object in the router configuration:

      
      @NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'detail/:id',
        component: HeroDetailComponent,
        resolve: {
          hero: HeroResolver
        }
      }
    ])
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}
    

And you can access to your resolved data from HeroComponent:

      
      @Component({
 selector: "app-hero",
 templateUrl: "hero.component.html",
})
export class HeroComponent {

 constructor(private activatedRoute: ActivatedRoute) {}

 ngOnInit() {
   this.activatedRoute.data.subscribe(({ hero }) => {
     // do something with your resolved data ...
   })
 }

}
    

Further information is available in the Usage Notes...

Methods

      
      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): MaybeAsync<T>
    
Parameters
route ActivatedRouteSnapshot
state RouterStateSnapshot
Returns

MaybeAsync<T>

Usage notes

When both guard and resolvers are specified, the resolvers are not executed until all guards have run and succeeded. For example, consider the following route configuration:

      
      {
 path: 'base'
 canActivate: [BaseGuard],
 resolve: {data: BaseDataResolver}
 children: [
  {
    path: 'child',
    guards: [ChildGuard],
    component: ChildComponent,
    resolve: {childData: ChildDataResolver}
   }
 ]
}
    

The order of execution is: BaseGuard, ChildGuard, BaseDataResolver, ChildDataResolver.