Design e Front-End -

Como Resolver o Erro de Locale no Angular 20 com Native Federation

Se você já tentou usar Angular 20 com Native Module Federation e se deparou com erros do tipo:

Unable to resolve specifier '@angular/common/locales/pt'

ou

NG0701: Missing locale data for the locale "pt-BR"

você sabe o quanto isso pode ser frustrante. Esse problema acontece devido a uma mudança significativa entre o Angular 19 e o 20 em como o Native Federation lida com locales e I18N.


Por que isso acontece só no Angular 20

No Angular 19, o Native Federation não tinha suporte nativo para I18N, então o carregamento de arquivos de locale precisava ser feito manualmente, usando helpers como shareAngularLocales com a flag legacy: true. Qualquer import de @angular/common/locales/* nos remotes geralmente passava despercebido, mesmo que estivesse bundlado de forma não ideal.

A partir do Angular 20.0.6, o Native Federation mudou o comportamento:

  • Suporte nativo a I18N: agora os remotes podem carregar arquivos de locale automaticamente.
  • ignoreUnusedDeps ativado: quando esta feature está ligada, o builder ignora dependências não usadas, o que evita que o esbuild tente transformar imports de locales (@angular/common/locales/pt) em módulos remotos via HTTP, eliminando o clássico erro Unable to resolve specifier.
  • Por isso o problema só aparece agora: se você migrou de Angular 19 para 20 e ainda não ativou ignoreUnusedDeps, qualquer import de locale direto no remote explode, mesmo que você registre o locale no host.

Fonte oficial: Native Federation README – Angular I18N


A Solução Definitiva

A solução é configurar o Native Federation corretamente e usar o helper shareAngularLocales para tornar os bundles compatíveis, sem precisar importar os arquivos de locale diretamente no remote.

federation.config.js do Remote

Por que isso funciona

  1. ignorePatterns: ['federation.config.js'] faz o builder ignorar o próprio arquivo de configuração, evitando que ele tente federar imports internos como os de locale.
  2. features: { ignoreUnusedDeps: true } evita que o esbuild transforme imports de locales em HTTP, eliminando o erro Unable to resolve specifier.
  3. shareAngularLocales(['pt']) prepara o bundle do remote para usar os arquivos de locale corretamente, sem precisar de imports diretos.

Registro do Locale no Host

Mesmo com shareAngularLocales, os pipes do Angular (DatePipeCurrencyPipeDecimalPipe) precisam de registro no host:

import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';

registerLocaleData(localePt, 'pt-BR');
  • Isso garante que o locale pt-BR esteja disponível para todos os remotes.
  • Nenhum remote deve importar ou registrar arquivos de locale diretamente.

Conclusão

Com o Angular 20 e Native Federation, o gerenciamento de I18N mudou. O problema de Unable to resolve specifier '@angular/common/locales/pt' aparece apenas porque o esbuild tenta transformar imports de Node_modules em ESM remoto. A solução combina:

  • shareAngularLocales no remote
  • ignoreUnusedDeps no remote
  • registro do locale no host

Seguindo essas etapas, seu app vai rodar com pt-BR corretamente, sem travar o bundle, e compatível com os novos padrões do Angular 20.

Entre para o Grupo Design e Programação no Telegram