Você já se perguntou por que sua aplicação Angular demora para carregar, mesmo sendo uma SPA? Ou talvez tenha enfrentado problemas de performance com bundles enormes sendo carregados de uma vez? Hoje, vou compartilhar **Roteamento Avançado no Angular 17+** - as técnicas e estratégias que transformam aplicações lentas em experiências ultra-rápidas. Ao final deste artigo, você dominará lazy loading, estratégias de preload e implementações que seus usuários vão adorar. ## O Que é Roteamento Moderno no Angular? O roteamento no Angular 17+ não é apenas sobre navegar entre páginas - é sobre criar experiências fluidas, carregamento inteligente de recursos e otimização automática de performance. Com as novas funcionalidades standalone components e melhorias no router, temos ferramentas poderosas para construir aplicações mais eficientes. ### Por Que Isso Importa Antes de mergulharmos na implementação, vamos entender o problema que estamos resolvendo: ```typescript // ❌ Sem lazy loading - todos os módulos carregados de uma vez const routes: Routes = [ { path: 'dashboard', component: DashboardComponent }, { path: 'users', component: UsersComponent }, { path: 'products', component: ProductsComponent }, { path: 'analytics', component: AnalyticsComponent }, // Bundle inicial gigante = 2MB+ ]; // ✅ Com lazy loading - carregamento sob demanda const routes: Routes = [ { path: 'dashboard', loadComponent: () => import('./dashboard/dashboard.component') }, { path: 'users', loadChildren: () => import('./users/users.routes') }, // Bundle inicial = 300KB, módulos carregados conforme necessário ]; ``` Esta transformação reduz o tempo de carregamento inicial de segundos para milissegundos, criando uma experiência muito mais responsiva para seus usuários. ## Quando Usar Roteamento Avançado? **Bons casos de uso:** - Aplicações com múltiplas features/módulos distintos - Dashboards complexos com diferentes seções - E-commerce com catálogo, checkout, admin - Sistemas ERP/CRM com módulos independentes **Quando NÃO usar lazy loading:** - Aplicações muito pequenas (< 5 rotas) - Features que sempre são acessadas juntas - Quando a latência de rede é mais crítica que o bundle size ## Configuração: Preparando Seu Roteamento Moderno Vamos construir isso passo a passo. Mostrarei como cada peça funciona e por que cada decisão importa. ### Passo 1: Configuração Base - Standalone Components Primeiro, precisamos configurar a base com standalone components (recomendado no Angular 17+): #### Opção 1: Bootstrap com Standalone (Recomendado) ```typescript // main.ts import { bootstrapApplication } from '@angular/platform-browser'; import { provideRouter } from '@angular/router'; import { AppComponent } from './app/app.component'; import { routes } from './app/app.routes'; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes), // outros providers... ] }); ``` #### Opção 2: Módulo Tradicional (Legado) ```typescript // app.module.ts import { RouterModule } from '@angular/router'; @NgModule({ imports: [ RouterModule.forRoot(routes, { enableTracing: false, // apenas para debug preloadingStrategy: PreloadAllModules }) ], // ... }) export class AppModule { } ``` **Como configurar rotas standalone:** ```typescript // app.routes.ts import { Routes } from '@angular/router'; export const routes: Routes = [ // Rota básica standalone { path: '', loadComponent: () => import('./home/home.component').then(m => m.HomeComponent) }, // Lazy loading de feature completa { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.routes').then(m => m.dashboardRoutes) }, // Redirecionamento e wildcard { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: '**', loadComponent: () => import('./not-found/not-found.component') } ]; ``` **Por que essa configuração funciona tão bem:** - **Inicialização mais rápida:** Componentes standalone reduzem overhead de módulos - **Tree-shaking melhorado:** Apenas código usado é incluído no bundle - **Desenvolvimento mais simples:** Menos boilerplate, foco no que importa ### Passo 2: Implementando Lazy Loading Inteligente Agora vamos implementar lazy loading de forma estratégica, explicando cada decisão: #### 2.1: Lazy Loading de Componentes Simples Primeiro, vamos criar a estrutura básica para componentes standalone: ```typescript // feature/product/product.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-product', standalone: true, imports: [CommonModule, RouterModule], template: `

Catálogo de Produtos

` }) export class ProductComponent { } ``` #### 2.2: Configuração de Rotas com Lazy Loading Agora vamos implementar lazy loading com diferentes estratégias: ```typescript // app.routes.ts import { Routes } from '@angular/router'; import { inject } from '@angular/core'; import { AuthGuard } from './guards/auth.guard'; export const routes: Routes = [ // Componente standalone com lazy loading { path: 'profile', canActivate: [() => inject(AuthGuard).canActivate()], loadComponent: () => import('./profile/profile.component') .then(m => m.ProfileComponent) }, // Feature module completo com subrotas { path: 'products', loadChildren: () => import('./products/products.routes') .then(m => m.productRoutes), data: { preload: true } // Marca para preload }, // Loading condicional baseado em permissões { path: 'admin', canMatch: [() => inject(AuthGuard).hasAdminRole()], loadChildren: () => import('./admin/admin.routes') } ]; ``` **Por que essa implementação?** - **Segurança:** Guards verificam permissões antes do loading - **Performance:** Cada feature carrega apenas quando necessária - **Flexibilidade:** Diferentes estratégias para diferentes necessidades #### 2.3: Criando Rotas de Feature Vamos criar um sistema de rotas hierárquico para features complexas: ```typescript // products/products.routes.ts import { Routes } from '@angular/router'; export const productRoutes: Routes = [ { path: '', loadComponent: () => import('./product-layout.component') .then(m => m.ProductLayoutComponent), children: [ { path: '', loadComponent: () => import('./product-list/product-list.component') }, { path: 'category/:id', loadComponent: () => import('./product-category/product-category.component'), data: { preload: true } }, { path: 'details/:id', loadComponent: () => import('./product-details/product-details.component'), resolve: { product: () => inject(ProductService).getProduct( inject(ActivatedRoute).snapshot.params['id'] ) } } ] } ]; ``` **Diferenças importantes:** - **Rotas aninhadas:** Estrutura hierárquica clara para UX consistente - **Resolvers:** Dados carregados antes da navegação, evitando loading states - **Data binding:** Metadados para controle de preload e cache #### 2.4: Implementação com Guards Funcionais ```typescript // guards/auth.guard.ts import { inject } from '@angular/core'; import { Router } from '@angular/router'; import { AuthService } from '../services/auth.service'; export const authGuard = () => { const authService = inject(AuthService); const router = inject(Router); if (authService.isAuthenticated()) { return true; } return router.parseUrl('/login'); }; // Usando o guard { path: 'dashboard', canActivate: [authGuard], loadChildren: () => import('./dashboard/dashboard.routes') } ``` **Guards funcionais explicados:** - **Mais limpos:** Sem classes, apenas funções puras - **Melhor testabilidade:** Fácil de mockar e testar - **Performance:** Menos overhead de instanciação ### Passo 3: Estratégias de Preloading Inteligentes ```typescript // strategies/smart-preload.strategy.ts import { Injectable } from '@angular/core'; import { PreloadingStrategy, Route } from '@angular/router'; import { Observable, of, timer } from 'rxjs'; import { mergeMap } from 'rxjs/operators'; @Injectable() export class SmartPreloadStrategy implements PreloadingStrategy { preload(route: Route, load: () => Observable): Observable { // Preload apenas se marcado nos data if (route.data?.['preload']) { // Aguarda 2 segundos após carregamento inicial return timer(2000).pipe( mergeMap(() => load()) ); } return of(null); } } // Configuração no provider provideRouter(routes, withPreloading(SmartPreloadStrategy)) ``` Como todas as peças trabalham juntas: o sistema carrega a rota inicial instantaneamente, então identifica rotas marcadas para preload e as carrega em background após um delay, garantindo que recursos críticos não sejam bloqueados. ## Exemplo Complexo: E-commerce com Micro-frontend Vamos construir algo mais realista - um e-commerce completo que demonstra uso avançado: ### Entendendo o Problema Antes de pular para o código, vamos entender o que estamos construindo: ```typescript // ❌ Abordagem ingênua - tudo carregado junto const routes: Routes = [ { path: 'products', component: ProductsComponent }, { path: 'cart', component: CartComponent }, { path: 'checkout', component: CheckoutComponent }, { path: 'admin', component: AdminComponent }, // Bundle inicial = 3.5MB, tempo de carregamento = 8s ]; // ✅ Nossa abordagem - carregamento estratégico const routes: Routes = [ { path: 'products', loadChildren: () => import('./features/catalog/catalog.routes'), data: { preload: true } // Provavelmente será acessado }, { path: 'checkout', loadChildren: () => import('./features/checkout/checkout.routes') // Carregado apenas quando necessário } // Bundle inicial = 280KB, carregamento incremental ]; ``` ### Implementação Passo a Passo #### Fase 1: Estrutura Base do E-commerce ```typescript // app.routes.ts import { Routes } from '@angular/router'; import { authGuard } from './guards/auth.guard'; import { SmartPreloadStrategy } from './strategies/smart-preload.strategy'; export const routes: Routes = [ // Landing page - carregamento imediato { path: '', loadComponent: () => import('./features/home/home.component') }, // Catálogo - preload habilitado (alta probabilidade de acesso) { path: 'products', loadChildren: () => import('./features/catalog/catalog.routes'), data: { preload: true, priority: 'high' } }, // Carrinho - carregamento sob demanda { path: 'cart', loadChildren: () => import('./features/cart/cart.routes'), data: { preload: false } }, // Checkout - carregamento protegido { path: 'checkout', canActivate: [authGuard], loadChildren: () => import('./features/checkout/checkout.routes'), data: { requiresAuth: true, preloadOnAuth: true // Preload quando usuário autenticar } }, // Admin - acesso restrito { path: 'admin', canMatch: [() => inject(AuthService).hasRole('admin')], loadChildren: () => import('./features/admin/admin.routes') } ]; ``` **Quebrando isso:** - **Priorização inteligente:** Recursos mais usados têm prioridade - **Segurança por layers:** Guards em diferentes níveis conforme necessidade - **Preload condicional:** Baseado em contexto do usuário #### Fase 2: Catalog Module com Subrotas Otimizadas ```typescript // features/catalog/catalog.routes.ts import { Routes } from '@angular/router'; import { productResolver } from './resolvers/product.resolver'; export const catalogRoutes: Routes = [ { path: '', loadComponent: () => import('./catalog-layout.component'), children: [ // Lista de produtos - view principal { path: '', loadComponent: () => import('./views/product-list/product-list.component'), data: { title: 'Produtos', description: 'Catálogo completo de produtos' } }, // Categoria específica - preload ativado { path: 'category/:slug', loadComponent: () => import('./views/category/category.component'), resolve: { category: (route: ActivatedRouteSnapshot) => inject(CategoryService).getBySlug(route.params['slug']) }, data: { preload: true } }, // Detalhes do produto - resolvers para UX { path: 'product/:id', loadComponent: () => import('./views/product-details/product-details.component'), resolve: { product: productResolver, recommendations: (route: ActivatedRouteSnapshot) => inject(RecommendationService).getFor(route.params['id']) } }, // Busca - componente leve { path: 'search', loadComponent: () => import('./views/search/search.component'), data: { preload: true, cache: true // Cache results } } ] } ]; ``` **Por que essa integração funciona:** - **Resolvers inteligentes:** Dados carregados antes da navegação - **Cache strategy:** Evita requests desnecessários - **Estrutura hierárquica:** Reutilização de layout e estado #### Fase 3: Implementação de Checkout Avançado ```typescript // features/checkout/checkout.routes.ts import { Routes } from '@angular/router'; import { cartGuard } from './guards/cart.guard'; import { stepGuard } from './guards/step.guard'; export const checkoutRoutes: Routes = [ { path: '', canActivate: [cartGuard], // Verifica se há itens no carrinho loadComponent: () => import('./checkout-layout.component'), children: [ // Processo de checkout em steps { path: '', redirectTo: 'shipping', pathMatch: 'full' }, // Step 1: Endereço de entrega { path: 'shipping', loadComponent: () => import('./steps/shipping/shipping.component'), data: { step: 1, title: 'Endereço de Entrega' } }, // Step 2: Método de pagamento { path: 'payment', canActivate: [stepGuard(1)], // Só acessa se step anterior completo loadComponent: () => import('./steps/payment/payment.component'), data: { step: 2, title: 'Pagamento' } }, // Step 3: Confirmação { path: 'review', canActivate: [stepGuard(2)], loadComponent: () => import('./steps/review/review.component'), resolve: { orderSummary: () => inject(CheckoutService).getOrderSummary() }, data: { step: 3, title: 'Revisar Pedido' } }, // Confirmação final { path: 'success/:orderId', loadComponent: () => import('./success/success.component'), resolve: { order: (route: ActivatedRouteSnapshot) => inject(OrderService).getById(route.params['orderId']) } } ] } ]; ``` **Por que essa arquitetura é poderosa:** - **Flow controlado:** Guards garantem progressão correta - **Estado preservado:** Layout compartilhado mantém contexto - **UX otimizada:** Resolvers evitam loading states durante navegação ## Padrão Avançado: Micro-frontends com Module Federation Agora vamos explorar um padrão avançado que demonstra uso master-level. ### O Problema com Monólitos de Frontend ```typescript // ❌ Limitações da abordagem simples const routes: Routes = [ { path: 'products', loadChildren: () => import('./products/products.module') }, { path: 'orders', loadChildren: () => import('./orders/orders.module') }, { path: 'analytics', loadChildren: () => import('./analytics/analytics.module') } // Todas as features no mesmo repositório = deploy coupling ]; ``` **Por que isso se torna problemático:** - Equipes diferentes não podem deployar independentemente - Builds longos mesmo para mudanças pequenas - Shared dependencies causam conflitos de versão ### Construindo a Solução com Module Federation #### Estágio 1: Configuração do Shell Application ```typescript // shell-app/webpack.config.js const ModuleFederationPlugin = require('@module-federation/webpack'); module.exports = { plugins: [ new ModuleFederationPlugin({ name: 'shell', remotes: { 'products-mf': 'products@http://localhost:4201/remoteEntry.js', 'orders-mf': 'orders@http://localhost:4202/remoteEntry.js', 'analytics-mf': 'analytics@http://localhost:4203/remoteEntry.js' }, shared: { '@angular/core': { singleton: true, strictVersion: true }, '@angular/common': { singleton: true, strictVersion: true }, '@angular/router': { singleton: true, strictVersion: true } } }) ] }; // shell-app/src/app/app.routes.ts export const routes: Routes = [ { path: 'products', loadChildren: () => import('products-mf/Routes').then(m => m.routes), data: { microfrontend: 'products', fallback: () => import('./fallbacks/products-fallback.component') } }, { path: 'orders', loadChildren: () => import('orders-mf/Routes').then(m => m.routes) .catch(() => import('./fallbacks/orders-fallback.component')), data: { microfrontend: 'orders' } }, { path: 'analytics', loadChildren: () => import('analytics-mf/Routes').then(m => m.routes), canLoad: [() => inject(FeatureToggleService).isEnabled('analytics')], data: { microfrontend: 'analytics' } } ]; ``` **Module Federation deep dive:** - **O que faz:** Permite carregar código de aplicações separadas em runtime - **Por que é poderoso:** Deploy independente + shared dependencies otimizadas - **Quando usar:** Teams grandes, features independentes, releases frequentes #### Estágio 2: Micro-frontend Products ```typescript // products-mf/webpack.config.js const ModuleFederationPlugin = require('@module-federation/webpack'); module.exports = { plugins: [ new ModuleFederationPlugin({ name: 'products', filename: 'remoteEntry.js', exposes: { './Routes': './src/app/app.routes.ts' }, shared: { '@angular/core': { singleton: true }, '@angular/common': { singleton: true }, '@angular/router': { singleton: true } } }) ] }; // products-mf/src/app/app.routes.ts export const routes: Routes = [ { path: '', loadComponent: () => import('./product-shell.component'), children: [ { path: '', loadComponent: () => import('./views/catalog/catalog.component') }, { path: 'details/:id', loadComponent: () => import('./views/details/details.component'), resolve: { product: (route: ActivatedRouteSnapshot) => inject(ProductService).getProduct(route.params['id']) } } ] } ]; ``` **Padrões de integração:** - **Comunicação via Router:** Estado compartilhado através de query params - **Event Bus:** Custom events para comunicação cross-microfrontend - **Shared Services:** Injetados via dependency injection #### Estágio 3: Error Handling e Fallbacks ```typescript // shell-app/src/app/services/microfrontend-loader.service.ts @Injectable({ providedIn: 'root' }) export class MicrofrontendLoaderService { private failedLoads = new Set(); async loadMicrofrontend(name: string): Promise { if (this.failedLoads.has(name)) { return this.loadFallback(name); } try { const module = await import(`${name}-mf/Routes`); return module.routes; } catch (error) { console.warn(`Failed to load ${name} microfrontend:`, error); this.failedLoads.add(name); return this.loadFallback(name); } } private async loadFallback(name: string) { switch (name) { case 'products': return import('./fallbacks/products-fallback.routes'); case 'orders': return import('./fallbacks/orders-fallback.routes'); default: return import('./fallbacks/generic-fallback.routes'); } } } // Rota com fallback automático { path: 'products', loadChildren: () => inject(MicrofrontendLoaderService).loadMicrofrontend('products'), data: { microfrontend: 'products' } } ``` **Por que essa arquitetura é robusta:** - **Resiliente a falhas:** Fallbacks automáticos quando micro-frontends não estão disponíveis - **Deploy independente:** Cada time pode deployar sem afetar outros - **Escalabilidade:** Novos micro-frontends podem ser adicionados sem rebuild ## Roteamento com TypeScript Avançado Para usuários TypeScript, aqui está como deixar tudo type-safe: ### Configurando Types Robustos ```typescript // types/routing.ts import { Data, Route } from '@angular/router'; export interface RouteData extends Data { title?: string; description?: string; preload?: boolean; priority?: 'low' | 'normal' | 'high'; requiresAuth?: boolean; roles?: string[]; microfrontend?: string; cache?: boolean; fallback?: () => Promise; } export interface AppRoute extends Omit { data?: RouteData; children?: AppRoute[]; } // Utility types para resolvers export interface ProductResolverData { product: Product; recommendations: Product[]; reviews: Review[]; } export type RouteResolvers = { [K in keyof T]: (route: ActivatedRouteSnapshot) => Observable | Promise | T[K]; }; ``` **Benefícios de type safety:** - **Autocomplete:** IDE sugere propriedades disponíveis - **Compile-time checks:** Erros detectados antes do runtime ### Implementação com Tipagem Adequada ```typescript // routes/typed-routes.ts import { inject } from '@angular/core'; import { AppRoute, ProductResolverData, RouteResolvers } from '../types/routing'; import { ProductService } from '../services/product.service'; const productResolvers: RouteResolvers = { product: (route) => inject(ProductService).getById(route.params['id']), recommendations: (route) => inject(ProductService).getRecommendations(route.params['id']), reviews: (route) => inject(ProductService).getReviews(route.params['id']) }; export const productRoutes: AppRoute[] = [ { path: 'details/:id', loadComponent: () => import('./product-details.component'), resolve: productResolvers, data: { title: 'Detalhes do Produto', preload: true, priority: 'high', cache: true } } ]; ``` ### Patterns TypeScript Avançados ```typescript // guards/typed-guards.ts import { CanActivateFn, CanMatchFn } from '@angular/router'; // Guard factory com types export function createRoleGuard(roles: string[]): CanActivateFn { return () => { const authService = inject(AuthService); return authService.hasAnyRole(roles); }; } // Guard composto export function createCompositeGuard( guards: CanActivateFn[] ): CanActivateFn { return (route, state) => { return guards.every(guard => guard(route, state)); }; } // Uso tipado const adminGuard = createRoleGuard(['admin', 'super-admin']); const secureGuard = createCompositeGuard([authGuard, adminGuard]); export const adminRoutes: AppRoute[] = [ { path: 'admin', canActivate: [secureGuard], loadChildren: () => import('./admin/admin.routes'), data: { requiresAuth: true, roles: ['admin'], title: 'Painel Administrativo' } } ]; ``` ## Padrões Avançados e Melhores Práticas ### 1. Strategy Pattern para Preloading **O que resolve:** Diferentes comportamentos de preload baseados em contexto **Como funciona:** Interface comum com implementações específicas ```typescript // strategies/preload-strategies.ts interface PreloadStrategy { shouldPreload(route: Route): boolean; getDelay(route: Route): number; } class NetworkAwareStrategy implements PreloadStrategy { shouldPreload(route: Route): boolean { // @ts-ignore - navigator.connection é experimental const connection = navigator.connection; if (connection?.effectiveType === '4g' && route.data?.['priority'] === 'high') { return true; } return route.data?.['preload'] === true && connection?.effectiveType !== 'slow-2g'; } getDelay(route: Route): number { // @ts-ignore const connection = navigator.connection; return connection?.effectiveType === '4g' ? 500 : 2000; } } class UserBehaviorStrategy implements PreloadStrategy { private readonly analytics = inject(AnalyticsService); shouldPreload(route: Route): boolean { const path = route.path; const userProbability = this.analytics.getNavigationProbability(path); return userProbability > 0.7; // 70% de chance de navegação } getDelay(): number { return 1000; } } // Implementação da estratégia composta @Injectable() export class SmartPreloadStrategy implements PreloadingStrategy { private strategies: PreloadStrategy[] = [ new NetworkAwareStrategy(), new UserBehaviorStrategy() ]; preload(route: Route, load: () => Observable): Observable { const shouldPreload = this.strategies.some(strategy => strategy.shouldPreload(route) ); if (!shouldPreload) { return of(null); } const delay = Math.min( ...this.strategies.map(strategy => strategy.getDelay(route)) ); return timer(delay).pipe(mergeMap(() => load())); } } ``` **Quando usar:** Aplicações com requisitos complexos de preload baseados em contexto ### 2. Router State Management **O problema:** Estado perdido durante navegação **A solução:** Store centralizado para estado de navegação ```typescript // services/router-state.service.ts @Injectable({ providedIn: 'root' }) export class RouterStateService { private state = new BehaviorSubject({}); private history: string[] = []; constructor(private router: Router) { this.router.events.pipe( filter(event => event instanceof NavigationEnd), map(event => (event as NavigationEnd).url) ).subscribe(url => { this.history.push(url); // Manter apenas os últimos 10 if (this.history.length > 10) { this.history.shift(); } }); } setState(key: string, value: any): void { const currentState = this.state.value; this.state.next({ ...currentState, [key]: value }); } getState(key: string): any { return this.state.value[key]; } canGoBack(): boolean { return this.history.length > 1; } goBack(): void { if (this.canGoBack()) { const previousUrl = this.history[this.history.length - 2]; this.router.navigateByUrl(previousUrl); } } } // Uso em componentes @Component({ template: ` ` }) export class NavigationComponent { private routerState = inject(RouterStateService); get canGoBack() { return this.routerState.canGoBack(); } goBack() { this.routerState.goBack(); } } ``` **Benefícios:** Estado preservado, navegação inteligente, melhor UX ### 3. Route Data Caching **Caso de uso:** Evitar re-requests desnecessários em dados que não mudam frequentemente ```typescript // services/route-cache.service.ts @Injectable({ providedIn: 'root' }) export class RouteCacheService { private cache = new Map(); set(key: string, data: T, ttlMinutes: number = 5): void { this.cache.set(key, { data, timestamp: Date.now(), ttl: ttlMinutes * 60 * 1000 }); } get(key: string): T | null { const cached = this.cache.get(key); if (!cached) { return null; } if (Date.now() - cached.timestamp > cached.ttl) { this.cache.delete(key); return null; } return cached.data; } invalidate(pattern?: string): void { if (!pattern) { this.cache.clear(); return; } for (const key of this.cache.keys()) { if (key.includes(pattern)) { this.cache.delete(key); } } } } // Resolver com cache export const cachedProductResolver = (route: ActivatedRouteSnapshot) => { const cache = inject(RouteCacheService); const productService = inject(ProductService); const productId = route.params['id']; const cacheKey = `product-${productId}`; // Verifica cache primeiro const cached = cache.get(cacheKey); if (cached) { return of(cached); } // Se não tem cache, busca e armazena return productService.getById(productId).pipe( tap(product => cache.set(cacheKey, product, 10)) // Cache por 10 minutos ); }; ``` **Red flags:** Cache muito agressivo pode mostrar dados desatualizados ### 4. Progressive Enhancement **O conceito:** Aplicação funciona mesmo com JavaScript desabilitado ```typescript // services/progressive-enhancement.service.ts @Injectable({ providedIn: 'root' }) export class ProgressiveEnhancementService { private supportsHistory = typeof window !== 'undefined' && window.history && window.history.pushState; enhanceNavigation(): void { if (!this.supportsHistory) { return; // Fallback para navegação tradicional } // Intercepta clicks em links e converte para navegação SPA document.addEventListener('click', (event) => { const target = event.target as HTMLElement; const link = target.closest('a[href]') as HTMLAnchorElement; if (link && this.shouldEnhance(link)) { event.preventDefault(); inject(Router).navigateByUrl(link.href); } }); } private shouldEnhance(link: HTMLAnchorElement): boolean { // Não enhance links externos if (link.hostname !== window.location.hostname) { return false; } // Não enhance downloads if (link.download) { return false; } return true; } } ``` **Trade-offs:** Complexidade adicional vs melhor acessibilidade e SEO ## Armadilhas Comuns a Evitar ### 1. Over-Engineering do Lazy Loading **O problema:** Lazy loading em excesso para aplicações pequenas ```typescript // ❌ Não faça isso - lazy loading desnecessário para apps pequenos const routes: Routes = [ { path: 'simple-page', loadComponent: () => import('./simple-page.component') // Componente de 2KB } ]; // ✅ Faça isso - direto para componentes simples const routes: Routes = [ { path: 'simple-page', component: SimplePageComponent // Componente já carregado } ]; ``` **Por que isso importa:** Overhead de lazy loading pode ser maior que o benefício para componentes pequenos ### 2. Resolvers Bloqueantes **Erro comum:** Resolvers que demoram demais para resolver **Por que acontece:** Requests lentos ou sequenciais desnecessários ```typescript // ❌ Evite isso - resolvers que bloqueiam navegação export const slowResolver = (route: ActivatedRouteSnapshot) => { const service = inject(SlowService); // Request lento que bloqueia navegação return service.getSlowData(route.params['id']).pipe( delay(5000) // 5 segundos de bloqueio! ); }; // ✅ Solução - loading assíncrono no componente @Component({ template: `

Carregando...

` }) export class FastComponent implements OnInit { loading = true; data: any; ngOnInit() { const id = inject(ActivatedRoute).snapshot.params['id']; inject(SlowService).getSlowData(id).subscribe(data => { this.data = data; this.loading = false; }); } } ``` **Prevenção:** Use resolvers apenas para dados críticos, loading states para o resto ### 3. Memory Leaks em Lazy Modules **A armadilha:** Subscriptions não canceladas em módulos lazy ```typescript // ❌ Evite isso - subscription que vaza memória @Component({ template: `

` }) export class LeakyComponent implements OnInit { data$!: Observable; ngOnInit() { // Subscription que nunca é cancelada this.service.getData().subscribe(data => { // Processamento que pode vazar }); } } // ✅ Solução - cleanup automático @Component({ template: `

` }) export class CleanComponent implements OnDestroy { private destroy$ = new Subject(); data$!: Observable; ngOnInit() { this.data$ = this.service.getData().pipe( takeUntil(this.destroy$) ); } ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); } } ``` **Sinais de alerta:** Uso de memória crescendo em navegação repetida ## Quando NÃO Usar Lazy Loading Não use lazy loading quando: - **Aplicações muito pequenas:** Menos de 5 rotas principais - **Features sempre usadas juntas:** Dashboard com widgets interdependentes - **Latência crítica:** Aplicações onde cada milissegundo importa ```typescript // ❌ Overkill para cenários simples const routes: Routes = [ { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.routes') // Overhead desnecessário } ]; // ✅ Solução simples é melhor const routes: Routes = [ { path: 'dashboard', component: DashboardComponent, // Carregamento direto children: [ { path: 'overview', component: OverviewComponent }, { path: 'stats', component: StatsComponent } ] } ]; ``` **Framework de decisão:** Use lazy loading quando bundle > 1MB ou features independentes ## Roteamento vs Redux/NgRx ### Quando Roteamento Brilha **Roteamento é ótimo para:** - **State baseado em URL:** Filtros, paginação, navegação - **Navegação simples:** Entre páginas e features - **SEO e deep linking:** URLs amigáveis e compartilháveis ### Quando Considerar Alternativas **Considere state management quando você precisa:** - **Estado complexo cross-component** → **NgRx:** Para state complexo que sobrevive à navegação - **Real-time updates** → **WebSockets + RxJS:** Para dados que atualizam em tempo real - **Optimistic updates** → **Apollo Client:** Para aplicações GraphQL com cache inteligente ### Matriz de Comparação | Característica | Router Angular | NgRx | Context API | |----------------|----------------|------|-------------| | State em URL | ✅ Excelente | ❌ Não suporta | ❌ Não suporta | | Performance | ✅ Lazy loading | ⚠️ Overhead inicial | ✅ Leve | | Complexidade | ✅ Simples | ❌ Curva de aprendizado | ✅ Simples | | Debug | ✅ URL debugging | ✅ DevTools | ⚠️ Limitado | | Time travel | ❌ Não suporta | ✅ Excelente | ❌ Não suporta | ## Conclusão Roteamento no Angular 17+ é uma ferramenta poderosa que pode transformar aplicações lentas em experiências ultra-rápidas. Ele traz lazy loading inteligente, preload estratégico e arquiteturas escaláveis para suas SPAs. **Principais takeaways:** - **Lazy loading é essencial:** Mas apenas para features independentes e aplicações grandes - **Preload estratégico:** Use dados de comportamento do usuário para otimizar carregamento - **Guards funcionais:** Mais limpos e testáveis que classes tradicionais - **TypeScript all the way:** Type safety evita bugs em runtime e melhora DX Na próxima vez que você construir uma aplicação Angular, lembre-se dessas estratégias. Seus usuários vão notar a diferença na velocidade, e sua equipe vai agradecer pela arquitetura limpa. **Próximos passos:** - Analise sua aplicação atual e identifique oportunidades de lazy loading - Implemente uma estratégia de preload baseada em analytics - Configure type safety completa em suas rotas Você já implementou lazy loading em seus projetos? Que padrões têm funcionado melhor para você? Compartilhe sua experiência nos comentários! --- *Se este guia ajudou você a dominar roteamento no Angular, siga para mais patterns e best practices avançadas! 🚀* ## Recursos - [Angular Router Documentation](https://angular.io/guide/router) - [Lazy Loading Feature Modules](https://angular.io/guide/lazy-loading-ngmodules) - [Preloading Strategies](https://angular.io/guide/router#preloading) - [Module Federation with Angular](https://nx.dev/recipes/module-federation) ---

Loading...

NAVEGAÇÃO

COMPANY

PROJETO

Roteamento Angular: O Guia Definitivo Para Navegação Inteligente