Publicado em
- 3 minutos de leitura
Como criar Resolvers no Angular

Resolvers são recursos muito poderosos que permitem você carregar dados durante o roteamento para uma página, ou melhor, para um componente.
Nesse artigo você vai aprender como utilizar esse recurso fantástico!
O que é um Resolver?
Resolvers são funções que serão rodadas assim que o roteamento para um determinado componente ser iniciado.
Esse recurso pode ser muito útil quando você precisar carregar algum dado antes mesmo do componente vinculado a esse roteamento ser criado.
Alguns cenários de uso seriam:
- Evitar que os elementos da tela renderizem de forma “quebrada”, trazendo uma experiência mais agradável para o usuário
- Melhorar a sincronia do consumo de dados nos componentes
- Dimininuição da complexidade dos componentes, uma vez que todos os dados já estão carregados antes de renderizar o componente
Um ponto importante sobre os Resolvers é que o componente vinculado ao roteamento só será renderizado quando todos os Resolvers tiverem suas rotinas finalizadas.
Resolvers podem retornar
uma Promise
, Observable
ou um objeto
já resolvido que será enviado para o componente.
Note que se você retornar uma
Promise
ou umaObservable
, o Angular aguardará a conclusão da mesma para então renderizar o componente.
Como criar um Resolver
No exemplo abaixo vamos criar um Resolver que recuperará um objeto Task
utilizando seu identificador (id
) que está na rota de navegação.
import { inject } from '@angular/core'
import { ResolveFn } from '@angular/router'
import { TasksService } from '../../services/tasks.service'
import { Task } from '../../interfaces/task'
export const getTaskByIdResolver: ResolveFn<Task> = (route) => {
// faz a injeção do service
const tasksService = inject(TasksService)
// recupera o id da rota
const taskId = route.paramMap.get('id') as string
// recupera a tarefa pelo id
return tasksService.getById(taskId) // retorna um `Observable<Task>`
}
Você pode criar um resolver utilizando o comando
ng g resolver
Note que para criar o Resolver precisamos apenas utilizar uma função que respeita a assinatura de ResolverFn.
Como registrar um Resolver
Para utilizar o Resolver criado acima, basta registrar a função na configuração de roteamento da aplicação (geralmente em app.routes.ts
).
import { Route } from '@angular/router'
import { getTaskByIdResolver } from './shared/resolvers/get-task-by-id.resolver/get-task-by-id.resolver'
import { isLoggedInGuard } from './shared/guards/is-logged-in.guard'
export const appRoutes: Route[] = [
{
path: 'edit/:id',
resolve: {
task: getTaskByIdResolver // resolver para recuperar a tarefa
},
loadComponent: () => import('./pages/form/edit/edit.component').then((m) => m.EditComponent)
}
]
É muito importante notar que a propriedade task
, dentro do objeto resolve
, receberá o valor retornado pelo resolver. Assim, o componente vinculado ao roteamento terá acesso ao valor retornado pelo resolver utilizando a propriedade task
.

Como consumir um Resolver em um Componente
Vamos utilizar como exemplo o resolver criado acima como base.
Existem duas formas de recuperar o valor retornado pelo resolver:
Maneira 1: Utilizando o ActivatedRoute
Essa abordagem é mais antiga e mais verbosa.
@Component({
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.scss']
})
export class EditComponent {
// recebe o valor retornado pelo resolver
task: Task | null = null
// faz a injeção do service
activatedRoute = inject(ActivatedRoute)
ngOnInit() {
// recebe o valor retornado pelo resolver
this.task = this.activatedRoute.snapshot.data['task']
}
}
Maneira 2: Utilizando o ActivatedRoute
Essa abordagem é nova e suportada em versões mais recentes do Angular.
@Component({
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.scss']
})
export class EditComponent {
task = input<Task>() // recebe o valor retornado pelo resolver
}
Você precisará habilitar a função withComponentInputBinding no seu app.routes.ts
para que o valor retornado pelo Resolver seja disponibilizado
via Input ao componente vinculado ao roteamento.
export const appConfig: ApplicationConfig = {
providers: [
...
provideRouter(appRoutes, withComponentInputBinding()),
...
],
};
Quando NÃO utilizar resolvers
Existem situações em que será melhor evitar o uso de Resolvers.
Alguns exemplos seriam:
- Quando o componente vinculado ao roteamento precisa fazer muitas requisições para ser renderizado, gerando um demora significativa no carregamento do componente e degradando a experiência do usuário.
- Se os endpoints que serão consumidos demoram mais de 500ms para responder, é melhor fazer o carregamento dos dados após o componentes já estiverem renderizados para evitar problemas de usabilidade.
Utilize Resolvers somente quando for necessário carregar dados com um tempo de resposta menor que 500ms. Essa abordagem garantirá uma experiência quase instântanea ao usuário ao carregar o componente.
Resolvers são recursos muito poderosos que permitem você carregar dados durante o roteamento para componente.
Essa abordagem traz benefícios e também malefícios para a experiência de uso da aplicação. Por isso, utilize de forma conciente, ok?
Obrigado por ler até aqui e até mais! 😎
Sobre o autor
