Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
Angular has a new websiteHead 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.