🧩 Exercícios Práticos: Ecossistema Angular 18, Angular CLI e Standalone Architecture

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

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 01.1 — Componente Standalone com Decorador @Component

Contexto: Componente Standalone com Decorador @Component no contexto de Ecossistema Angular 18, Angular CLI e Standalone Architecture.

Requisitos de Execução:

  1. Criar componente standalone com standalone: true, imports: [CommonModule] e template inline.

Resultado Esperado

Componente Angular Standalone renderizado com sucesso.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_1_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - Ecossistema Angular 18, Angular CLI e Standalone Architecture
🔑 Gabarito de Código & Solução Comentada 
// card-saudacao.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-card-saudacao',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="card-box">
      <h2>{{ titulo }}</h2>
      <p>Angular 18 Standalone Architecture</p>
    </div>
  `
})
export class CardSaudacaoComponent {
  titulo = 'Bem-vindo ao Portal Angular';
}

🔍 Nível 2: Prática

Problema 01.2 — Bootstrap de Aplicação Standalone com bootstrapApplication()

Contexto: Bootstrap de Aplicação Standalone com bootstrapApplication() no contexto de Ecossistema Angular 18, Angular CLI e Standalone Architecture.

Requisitos de Execução:

  1. Configurar inicialização da aplicação em main.ts utilizando bootstrapApplication(AppComponent, appConfig).

Resultado Esperado

Aplicação Angular inicializada sem dependência de NgModules.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_2_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - Ecossistema Angular 18, Angular CLI e Standalone Architecture
🔑 Gabarito de Código & Solução Comentada 
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

⚡ Nível 3: Integração

Problema 01.3 — Configuração de Provedores Globais em appConfig (provideRouter, provideHttpClient)

Contexto: Configuração de Provedores Globais em appConfig (provideRouter, provideHttpClient) no contexto de Ecossistema Angular 18, Angular CLI e Standalone Architecture.

Requisitos de Execução:

  1. Declarar provedores em ApplicationConfig com provideRouter(routes) e provideHttpClient(withFetch()).

Resultado Esperado

Provedores de roteamento e cliente HTTP configurados globalmente.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_3_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - Ecossistema Angular 18, Angular CLI e Standalone Architecture
🔑 Gabarito de Código & Solução Comentada 
// app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(withFetch())
  ]
};

🏆 Nível 4: Desafio Corporativo

Problema 01.4 — Otimização de Build com esbuild e Vite DevServer no Angular 18

Contexto: Otimização de Build com esbuild e Vite DevServer no Angular 18 no contexto de Ecossistema Angular 18, Angular CLI e Standalone Architecture.

Requisitos de Execução:

  1. Configurar angular.json com o novo build system application e medição de bundle sizes.

Resultado Esperado

Build Angular compilado em tempo recorde com esbuild.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_01_4_SeuNome
  2. Envie na tarefa: Atividade Cap 01 - Ecossistema Angular 18, Angular CLI e Standalone Architecture
🔑 Gabarito de Código & Solução Comentada 
// angular.json (Trecho)
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "outputPath": "dist/portal",
      "index": "src/index.html",
      "browser": "src/main.ts"
    }
  }
}
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos