Spec Frontend Com Angular • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 14.1 — Configuração de Rotas Standalone com loadComponent()

Contexto: Configuração de Rotas Standalone com loadComponent() no contexto de Roteamento Avançado, Lazy Loading e Router Guards.

Requisitos de Execução:

  1. Configurar carregamento lazy de componentes com loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent).

Resultado Esperado

Rota carregada sob demanda em chunk JavaScript isolado.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_14_1_SeuNome
  2. Envie na tarefa: Atividade Cap 14 - Roteamento Avançado, Lazy Loading e Router Guards
🔑 Gabarito de Código & Solução Comentada 
// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard/dashboard.component').then(m => m.DashboardComponent)
  }
];

🔍 Nível 2: Prática

Problema 14.2 — Guards Funcionais com CanActivateFn e Injeção com inject()

Contexto: Guards Funcionais com CanActivateFn e Injeção com inject() no contexto de Roteamento Avançado, Lazy Loading e Router Guards.

Requisitos de Execução:

  1. Criar guarda de rota funcional authGuard: CanActivateFn verificando token no AuthService.

Resultado Esperado

Acesso à rota protegida bloqueado por CanActivateFn funcional.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_14_2_SeuNome
  2. Envie na tarefa: Atividade Cap 14 - Roteamento Avançado, Lazy Loading e Router Guards
🔑 Gabarito de Código & Solução Comentada 
// auth.guard.ts
import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = (route, state) => {
  const router = inject(Router);
  const estaAutenticado = Boolean(localStorage.getItem('token'));
  return estaAutenticado ? true : router.createUrlTree(['/login']);
};

⚡ Nível 3: Integração

Problema 14.3 — Carregamento de Dados com ResolveFn

Contexto: Carregamento de Dados com ResolveFn no contexto de Roteamento Avançado, Lazy Loading e Router Guards.

Requisitos de Execução:

  1. Pré-carregar dados da entidade antes da transição de rota com produtoResolver: ResolveFn<Produto>.

Resultado Esperado

Dados resolvidos antes da renderização do componente de detalhes.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_14_3_SeuNome
  2. Envie na tarefa: Atividade Cap 14 - Roteamento Avançado, Lazy Loading e Router Guards
🔑 Gabarito de Código & Solução Comentada 
// produto.resolver.ts
import { ResolveFn } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export const produtoResolver: ResolveFn<any> = (route) => {
  const http = inject(HttpClient);
  const id = route.paramMap.get('id');
  return http.get(`/api/produtos/${id}`);
};

🏆 Nível 4: Desafio Corporativo

Problema 14.4 — Guarda de Saída com CanDeactivateFn para Formulários com Dados Não Salvos

Contexto: Guarda de Saída com CanDeactivateFn para Formulários com Dados Não Salvos no contexto de Roteamento Avançado, Lazy Loading e Router Guards.

Requisitos de Execução:

  1. Alertar usuário caso tente sair da página com alterações não salvas no formulário.

Resultado Esperado

Transição de rota prevenida com caixa de diálogo de confirmação.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_14_4_SeuNome
  2. Envie na tarefa: Atividade Cap 14 - Roteamento Avançado, Lazy Loading e Router Guards
🔑 Gabarito de Código & Solução Comentada 
// unsaved-changes.guard.ts
import { CanDeactivateFn } from '@angular/router';

export interface PossuiAlteracoes { temAlteracoesNaoSalvas(): boolean; }

export const unsavedChangesGuard: CanDeactivateFn<PossuiAlteracoes> = (component) => {
  return component.temAlteracoesNaoSalvas() ? confirm('Deseja descartar as alterações?') : true;
};