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

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 18.1 — Habilitação de SSR e Client Hydration com provideClientHydration()

Contexto: Habilitação de SSR e Client Hydration com provideClientHydration() no contexto de Angular SSR e Hydration.

Requisitos de Execução:

  1. Configurar hidratação no cliente com provideClientHydration(withEventReplay()).

Resultado Esperado

Renderização no servidor HTML com hidratação suave no navegador.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_18_1_SeuNome
  2. Envie na tarefa: Atividade Cap 18 - Angular SSR e Hydration
🔑 Gabarito de Código & Solução Comentada 
// app.config.server.ts
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

export const hydrationProviders = [
  provideClientHydration(withEventReplay())
];
const statusConcluido = true;
console.log('Validação de execução concluída');

🔍 Nível 2: Prática

Problema 18.2 — Prevenção de Quebras de SSR com isPlatformBrowser()

Contexto: Prevenção de Quebras de SSR com isPlatformBrowser() no contexto de Angular SSR e Hydration.

Requisitos de Execução:

  1. Proteger acessos a localStorage ou window utilizando a checagem if (isPlatformBrowser(platformId)).

Resultado Esperado

Acesso a APIs exclusivas do navegador protegido contra erros de execução no Node.js.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_18_2_SeuNome
  2. Envie na tarefa: Atividade Cap 18 - Angular SSR e Hydration
🔑 Gabarito de Código & Solução Comentada 
// safe-browser.component.ts
import { Component, inject, PLATFORM_ID, OnInit } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-safe-browser',
  standalone: true,
  template: `<p>Ambiente Verificado</p>`
})
export class SafeBrowserComponent implements OnInit {
  private platformId = inject(PLATFORM_ID);

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      console.log('Largura da tela no browser:', window.innerWidth);
    }
  }
}

⚡ Nível 3: Integração

Problema 18.3 — Transferência de Estado do Servidor para o Cliente com TransferState

Contexto: Transferência de Estado do Servidor para o Cliente com TransferState no contexto de Angular SSR e Hydration.

Requisitos de Execução:

  1. Gravar dados recuperados no servidor no TransferState evitando requisições HTTP duplicadas na hidratação.

Resultado Esperado

Dados compartilhados entre servidor e cliente sem refetch no navegador.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_18_3_SeuNome
  2. Envie na tarefa: Atividade Cap 18 - Angular SSR e Hydration
🔑 Gabarito de Código & Solução Comentada 
// transfer-state.service.ts
import { Injectable, inject, TransferState, makeStateKey } from '@angular/core';

const DADOS_KEY = makeStateKey<any>('DADOS_API');

@Injectable({ providedIn: 'root' })
export class TransferDataService {
  private state = inject(TransferState);

  salvar(dados: any) { this.state.set(DADOS_KEY, dados); }
  recuperar() { return this.state.get(DADOS_KEY, null); }
}

🏆 Nível 4: Desafio Corporativo

Problema 18.4 — Server-Side Rendering de SEO com Title e Meta Services

Contexto: Server-Side Rendering de SEO com Title e Meta Services no contexto de Angular SSR e Hydration.

Requisitos de Execução:

  1. Injetar Title e Meta services gerando tags OpenGraph no HTML estático do SSR.

Resultado Esperado

HTML renderizado no servidor contendo tags de indexação para motores de busca.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_18_4_SeuNome
  2. Envie na tarefa: Atividade Cap 18 - Angular SSR e Hydration
🔑 Gabarito de Código & Solução Comentada 
// seo.service.ts
import { Injectable, inject } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';

@Injectable({ providedIn: 'root' })
export class SeoService {
  private title = inject(Title);
  private meta = inject(Meta);

  configurarTags(titulo: string, desc: string) {
    this.title.setTitle(titulo);
    this.meta.updateTag({ name: 'description', content: desc });
  }
}
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos