Problema com o link no primeiro redirecionamento para a página de erro

Fala ai Julio, tudo bem? Dizer assim o que pode estar ocorrendo e como resolver sem ver o problema é um pouco complicado.

Por conta disso, vou te pedir um favor, compartilha o projeto com a gente. Pode compartilhar através do Github ou Google Drive (zipado).

Assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Fico no aguardo.

Matheus, segue o link do arquivo no Google Drive:

https://drive.google.com/file/d/15eYqrCmee4A_zVAvwsZCcNTmmfnee7s0/view?usp=sharing

Tem três pastas:

• alurapic, com o projeto desenvolvido em angular;
• api, com o servidor de dados da aplicação;
• log-server, com o servidor de log de erros.

Para simular um erro, eu coloquei um acesso a uma propriedade de uma constante que estava com valor nulo. Aí o direcionamento para a página de erro acontece, mas o link para ir para a página principal não funciona. Só depois de recarregar a página é que dá certo.

Se tiver algum problema com o arquivo que estou compartilhando, tente o arquivo do projeto anexado pelo professor à aula. Não fiz o download dele, mas tenho quase certeza que também apresenta o erro.

Grato!

Fala Julio, tudo bem? Baixei e configurei o projeto, mas não consegui simular o problema.

Consegue me informar os passos para simular o problema por aqui? Eu loguei na aplicação e tals.

Fico no aguardo, desculpe não ter conseguido simular a situação aqui.

Matheus, não entendi direito se você não conseguiu simular um problema ou se o problema não aconteceu com você.

Para simular um erro, acesse o arquivo photo-service.ts e descomente as linhas 54 e 55, onde eu coloquei um erro proposital que chama a página de erro. As linhas a serem descomentadas possuem o seguinte código:

        const photo: Photo = null;
        console.log(photo.postDate);

Com este código ativo, basta executar a aplicação e clicar em qualquer foto da lista. Acesse o aplicativo com o usuário "flavio" e senha "123". Como estou tentando acessar uma propriedade de uma variável com valor nulo, acontecerá um erro que direcionará para a página de erro. No primeiro redirecionamento, o link para "retornar para a aplicação" não estará ativo. Se recarregar a página, o link aparecerá e funcionará. A dúvida é porque o link não funciona no primeiro redirecionamento.

Fala ai Julio, tudo bem? Isso parece ser um bug do Angular, o problema é que a navegação está acontecendo fora do Zone, olha o warning que dá no seu console:

Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

Para resolver o problema, você pode buscar o NgZone com o injector:

const zone = this.injector.get(NgZone);

E depois utilizar a função run para realizar a navegação:

if (environment.production || true) zone.run(() => router.navigate(['/error']));

Dessa maneira a navegação será feita por ele e o link deve estar disponível.

Caso queira mais informações sobre o bug, achei nesse link:

https://github.com/angular/angular/issues/25837

Eu testei na minha máquina com o Angular 8 e o problema ainda persiste.

Caso não saiba o que é esse tal de Zone, ele é utilizado pelo Angular (por padrão) para realizar detecção de mudanças (change detection), ele é um mecanismo para interceptar e rastrear tarefas assíncronas.

Provavelmente quando aquele código rodou fora dele, ele não percebeu que precisava disparar uma task e sendo assim não conseguiu fazer o bind dos componentes Angular com o DOM, ou seja, a UI não foi atualizada completamente (faltou setar o href no a).

Para mais informações:

https://medium.com/better-programming/zone-js-for-angular-devs-573d89bbb890

Espero ter ajudado.

Matheus, funcionou perfeitamente! Muito obrigado pela ajuda.

Magina Julio, eu que agradeço pelo ensinamento, não conhecia esse problema e tive que buscar uma solução.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.