Publicado em

- 3 minutos de leitura

Como criar Resolvers no Angular

img of 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 uma Observable, 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.

Imagem com o texto: Curso testes automatizado com Angular e um Robo azul com uma logo do Angular atrás. Logo abaixo existe um botão com o texto 'Eu quero!'

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

Author's photo
Henrique Custódia Arquiteto Frontend, entusiasta Angular, cat lover, criador de conteúdo e fundador da Code Dimension!

Assine nossa Newsletter e receba os últimos posts e novidades da Code Dimension!