O mesmo repositório, o mesmo commit, o mesmo package-lock.json: Em um computador o app Angular roda perfeitamente, em outro ele trava imediatamente no bootstrap com um erro NG0203. No final, a culpa não era nem do Angular, nem do npm — e sim de uma pasta chamada rene.poepperl.000.
Testado com: Angular 22.0.8 · @angular/build 22.0.7 · Node 24 · Windows · Vite Dev-Server
Erro NG0203 apesar do código-fonte estar correto
Desde a última sexta-feira, esse fenômeno tem me levado à loucura. No meu computador de desenvolvimento, o app Angular inicializava sem problemas, mas no servidor de desenvolvimento (Windows Server com Remote Desktop), só aparecia uma tela branca e a seguinte mensagem de erro no console do navegador:
ERROR RuntimeError: NG0203: The `EnvironmentInjector` token injection failed.
`inject()` function must be called from an injection context…
at injectInjectorOnly (_pending_tasks-chunk.mjs:667:11)
at ɵɵinject (_pending_tasks-chunk.mjs:684:40)
at Object.factory (_debug_node-chunk.mjs:10034:42)
at R3Injector.hydrate (_pending_tasks-chunk.mjs:1314:11)
at __spreadProps.getStandaloneInjector (_debug_node-chunk.mjs:10054:31)
at createRootViewInjector (_debug_node-chunk.mjs:8994:44)
at ComponentFactory.create (_debug_node-chunk.mjs:9065:32)
O que normalmente significa o erro NG0203?
O erro ocorre quando a função inject() do Angular é usada fora de um contexto de injeção válido. Ou seja, trata-se (na verdade) da injeção de dependência do Angular.
Contextos válidos de injeção são:
- Construtores de classe
- Inicializadores de campo
- Funções de fábrica: dentro da função de fábrica de um InjectionToken ou ao configurar providers usando useFactory
- Guards e resolvers funcionais do roteador (CanActivateFn ou ResolveFn…)
Uma olhada em main.ts, app.config.ts e nos vários componentes mostrou, no entanto, que estava tudo limpo. Configuração padrão com provideRouter & cia. Nada suspeito.
Se o mesmo código funciona no computador A e não no computador B, raramente o código é o problema.
Passo 1: Primeira coisa: reduzir o espaço de busca
Antes de passar horas lendo código: O Angular-Dev-Server (Vite com módulos on-the-fly) e o build para produção (esbuild com bundles fixos) funcionam de formas completamente diferentes.
Execute este comando:
npx ng build --configuration development
npx http-server dist/DeinProjekt/browser
Este comando ignora o Angular-Vite-Dev-Server embutido, faz um build e serve o resultado em um simples http-server. Se isso funcionar, definitivamente o problema não está no código ou nas dependências, mas sim em algum lugar no Vite-Dev-Server.
Passo 2: Analisar o grafo de módulos
A mensagem de erro NG0203 indica que, no momento em que inject é chamado, ao contrário do esperado, não existe um contexto de injeção, o que pode ser causado por um problema de múltiplas instâncias. Se o servidor de desenvolvimento carrega o Angular Core várias vezes em vez de apenas uma vez, o contexto de injeção é criado na primeira carga, mas na segunda instância o inject é chamado – sem contexto de injeção. E aí dá erro.
A busca pelo erro deve, portanto, continuar na aba de rede das ferramentas de desenvolvedor do navegador para obter certeza aqui.
No meu caso, o servidor de desenvolvimento realmente forneceu os módulos / pedaços de módulos com dois hashes diferentes. Ou seja, o Angular Core foi pré-empacotado duas vezes e ambas as versões foram carregadas no aplicativo Angular:
| Angeforderte Datei | Typ | Größe |
|---|---|---|
main.js |
script | 104 kB |
@angular_platform-browser.js?v=abc4743f |
script | 50,2 kB |
@angular_core.js?v=abc4743f |
script | 998 kB |
@angular_router.js?v=abc4743f |
script | 261 kB |
| ... | ... | ... |
chunk-GMRBKFW6.js?v=7c52e23b |
script | 89,3 kB |
chunk-KXOBELG4.js?v=7c52e23b |
script | 905 kB |
Dois hashes diferentes (abc4743f e 7c52e23b) significam: Angular Core foi pré-empacotado e carregado duas vezes (~998 KB + ~905 KB). Uma instância define o injector, a outra encontra null – pronto, NG0203.
Passo 3: Encontrar o culpado
Depois que ficou claro que realmente foram carregadas duas instâncias do Angular, a pergunta era: Por quê?
Um olhar mais atento na aba “Sources” das DevTools do navegador ajudou.
Ela mostrou que uma instância foi carregada de C:\Users\rene.poepperl\Documents\Projekt e a outra de C:\Users\rene.poepperl.000\Documents\Projekt. O culpado era, portanto, minha pasta de perfil do Windows.
O que aconteceu aqui?
No Windows, uma pasta de perfil de usuário com a extensão .000 é criada quando o Windows não consegue carregar o perfil de usuário original durante o login. Então o Windows cria um novo perfil em segundo plano e vincula os caminhos antigos por meio das chamadas junctions (atalhos no sistema de arquivos, também chamados de reparse points).
Na verdade, essas junctions acabam apontando para os mesmos arquivos. Mas: o Node.js ou o Vite resolvem caminhos em alguns pontos via realpath() e em outros não, o que pode causar inconsistências nos nomes dos caminhos. O Vite acha que está trabalhando com dois diretórios diferentes e empacota os node_modules em duplicidade. Parabéns!
A solução: Configuração limpa do espaço de trabalho
A correção é simples, mas exige uma migração rigorosa:
Mova o projeto para um caminho real e direto, sem pontos de reanálise (por exemplo,
C:\dev\SeuProjeto).Importante: Não leve a pasta
node_modulesjunto! Caso contrário, você continuará levando as referências de caminho corrompidas.Reinstale as dependências do zero
Depois, verifique no servidor de desenvolvimento (guia de rede) se todos os chunks do Angular possuem exatamente o mesmo hash ?v=.... Se sim, o aplicativo voltará a funcionar de forma estável.
