Angular v18 e v19 Aula 25 - Atualização para o Angular 19

Salve salve galera bem-vindos ao canal ep Company gleo aqui e bora para mais um vídeo né como alguns aí já devem saber angular 19 foi lançada já tá disponível para atualização e também para que a gente possa estar criando aí as nossas aplicações do zero né Eh sem Muita enrolação Né desde já eu quero te pedir para est se inscrevendo no nosso canal ativando o Sininho para ficar por dentro das notificações Curtindo esse vídeo Eh caso ele te agregar algum conhecimento que você ainda não tinha compartilhando esse conteúdo também entre as suas redes sociais né

e sem Muita enrolação bora pra tela Porque hoje a gente vai vai falar um pouquinho sobre angular 19 e eu vou compartilhar com vocês também um pouquinho da minha experiência pós atualização né eu acabei de migrar uma aplicação que tá em desenvolvimento aqui da da nossa empresa né infelizmente não vou poder mostrar o dashboard dessa aplicação para vocês exatamente Por uma questão de ética Mas provavelmente eu vou est criando uma aplicação a parte para ilustrar né todo esse procedimento para vocês e e tá trazendo também mais algumas novidades aí e com relação a essa questão

da da v19 né até porque tem muita coisa legal no ar eh bom bora pra tela eh como vocês podem ver aqui essa aplicação ela tava um pouco desatualizada ela tava na v15 do angular né Ela é uma aplicação que tá utilizando a renderização estática né o ssr eh como alguns já conhecem eh e aí a gente optou né Eh por tá fazendo a atualização dessa aplicação eh por recomendação né o time do angular recomenda que a gente atualize um pacote por vez né então uma versão por vez na verdade e assim foi eh sobre

esse procedimento aqui eu não vou falar muito porque basicamente tem vídeo no canal sobre isso né eh e aí aqui ele vai a se ela vai apresentando pra gente né todo o processo aqui de atualização os arquivos que vão sendo modificados E por aí vai né em alguns casos né caso você não caso você tenha alguns pacotes eh que o angular eh venha ter alguma dependência né Como foi o caso aqui do ngj Universal Express Engine né Por exemplo ele utilizava ali o angular common e o angular core E também o platform server por baixo

dos panos né então Eh como eu atualizei para ver para V para v17 então ele acabou chiando né dizendo que não tava e que tava incompatível as versões o que de fato tava porque o pacote que tava na minha aplicação ele era na v15 então né E esse pacote em especial A C do angler ela não não atualiza mas não vem o caso então assim é em alguns casos para você fazer essa atualização da v15 paraa v16 ou qualquer outra versão pode ser necessário que você esteja acrescentando a Flag Force para executar essa atualização não

tem problema nenhum em fazer isso depois você só vai ter que corrigir uma coisa ou outra eh na sua aplicação para ela compilar hã daí depois disso né da de passar para V para v16 eu fui para v17 assim sucessivamente né e aqui não tem muito o que se falar e e enfim atualização para v18 aqui entra e um ponto interessante porque na v18 a gente tem aqui a mudança né da forma de build né aonde a gente passa a utilizar aqui o build angular né que basicamente vai est utilizando por baixo dos panos aí

né US build quando a gente chega na v18 pode ser sei que tem alguns probleminhas para você compilar a aplicação eh problemas esses que inclusive eu também já abordo né em vídeos aqui no canal então se você quiser est eh fazendo esse procedimento de atualização e tiver com alguma dúvida bom eh vê aí na playlist anterior né como que como que é realizado o update ele foi dividido em duas partes né Eh a atualização para v18 e depois a solução de problemas relacionados à atualização da v18 eh enfim v19 e aqui também a gente vai

ter algumas modificações interessantes né E aqui ele vai fazer o update do ssr né pra gente Além disso ele também vai fazer aqui a migração né da forma de build e também né do application builder quer dizer ele vai fazer aqui a modificação aqui do use application builder né migrando aqui a forma de build Corrigindo o que eu falei e depois ele vai modificar também o provider initializer né onde ele vai modificar algumas questões internas ali do do angular sobre a inicialização da aplicação né Eh para você que não tá muito antenado mas assim eh

a partir da v19 o angular agora ele permite que a gente possa tá eh realizando né a compilação de acordo com com as rotas eh não sei se a compilação seria a a forma ideal de de explicar o que eu tô falando mas basicamente no blog do do angular mesmo a gente tem lá um exemplo disso né aonde você pode escolher qual vai ser o tipo de renderização essa é a palavra que eu tava procurando você pode dizer aqui se a renderização ela vai ser do lado do servidor do lado do cliente ou se ela

vai ser uma pré renderização né basicamente essa talvez seja a uma uma das maiores novidades da da v19 aí né que que basicamente bastante gente tava aguardando porque agora você pode e escolher entre a renderização estática né é a renderização ali via ssr e também a renderização padrão né do do angular né o CSR né que basicamente é a forma padrão que ele trabalha o spa mas caso seja necessário você pode fazer também a renderização estática ou a pré renderização de acordo com a Rota que você escolher então você pode eh eh executar esse processo

e por PG e por componente ali né no caso de acordo com a Rota acho que ess essa talvez seja a maior novidade e para mim eu achei Eu particularmente achei isso bem interessante Bom agora vamos falar um pouquinho sobre as questões né relacionadas a problemas pós atualização né bom de cara já vou adiantar para vocês que quando você a aplicação para v19 automaticamente ele vai converter eh não converter mas ele vai adicionar algumas propriedades no seu componente por se o seu componente ele não tiver no padrão standalone ele já vai setar o standalone como

e como falso para você e aí por recomendação né E se você ainda não tá utilizando standalone te recomendo profundamente que comece a utilizar para que você possa ter uma experiência mais agradável com a v19 Porque caso contrário você vai ter grandes problemas ali e no pós atualização eh basicamente a gente aqui teve que eh configurar reconfigurar né a estrutura da aplicação eu vou est mostrando para vocês aqui hã uma das coisas que eu tive que fazer foi remover os NG módulos iniciais aqui aqui né onde a gente tinha aqui o app modle a gente

tinha o app routes modle e também no caso do ssr o app server module alguma coisa assim não me recordo de cabeça eh é app server modu né então a gente teve que remover e configurar esses carinhas aqui o app config o app config server né e consequentemente migrar os componentes ali aos quais eu tava utilizando no app component para os importes do do standalone no app component né Então essa foi a primeira modificação Hã Como eu disse né o o próprio angular após a migração ele tratou de adicionar essa Flag para mim a única

coisa que eu tive que fazer foi depois adicionar os importes aqui né Hã Além disso né eu tive que converter o o módulo de rotas para uma constante né ã o que mais que foi feito deixa eu ver aqui ah tá a forma de build né ela vai mudar Lógico você pode escolher não mudar mas seria interessante para que você eh se mantenha no padrão mais atual eh que o angular tem desenvolvido aí pra gente né e para que você possa aproveitar de uma de algumas melhorias de desempenho com relação o angular né Afinal de

contas agora nesse novo modelo de Build a gente vai est utilizando aí o build Além disso né teve algumas configurações aqui no TS config basicamente eu tive que trocar aqui do node pro bundler automaticamente ele já vai adicionar aqui o types node pra gente o que mais bom eu vou seguir aqui pelo fluxo de modificações né Para que vocês possam estar vendo o que que foi modificado Como eu disse aqui ó Ele mexeu no no aqui foi mais a questão de dentação mas ele alteração maior ficou a cargo desse carinha aqui do Dev kit né

que inclusive foi até na V 18 não foi nem na v1 ã Além disso eu tive as alterações do pacote né E aí uma questão eh se você tiver utilizando no caso aqui o deixa eu achar o pacote uhum o types node se você tiver utilizando Esse pacote aqui o @types bar noode eh eu tive problema com ele né ele não tava deixando a aplicação compilar então remova esse forte aqui esse esse pacote aqui do do seu package Jason tá bom H caso futuramente seja necessário você pode estar adicionando ele novamente mas adiciona ele na

versão que for recomendada ã então remova ele os outros pacotes que eu removi aqui é porque nessa aplicação eu não vou est utilizando eh basicamente a parte de testes então aqui eu acabei removendo para não deixar a aplicação eh pesada né carregada com pacote que eu não vou estar utilizando na na nessa aplicação eh o mesmo eu fiz aqui pro pros arquivos spec né eu fiz a remoção deles não tem problema nenhum você fazer isso caso você não for trabalhar com teste é só você depois tá modificando também o angular Jason para remover ali o

o objeto né de de teste né o objeto de configuração do teste hã e eu nem sei se eu removi mas caso eu não tenha removido eu tenho que remover também o a chamada né Para para que o teste seja executado bom e basicamente foi o que eu tive que fazer as modificações que eu tive que fazer para est eh migrando para a v19 né e no resumo geral não foi muito problemático até porque isso aqui é só uma land então e não se teve grandes problemas porque eu também não não tenho eh muito pacote

externo para para atualizar que venha gerar alguma incompatibilidade eh nessa aplicação em especial a gente nem biblioteca de componentes a gente tá tá utilizando então Eh Foi bem tranquilo tá fazendo esse update para v19 nessa aplicação em especial e aí como eu disse o types node recomendo a vocês que estejam movendo exatamente por conta eh desse erro desses erros aqui né que eu tive eh que foram causados pela pelo pacote do types node depois de remover e instalar as dependências novamente eh esse esse erro ele foi solucionado né Vocês viram que houve-se várias tentativas ali

né então Eh Foi um erro meio chatinho para se solucionar mas foi um erro que foi solucionado e a aplicação Ela tá compilando aqui na porta 4200 né que infelizmente eu não posso est mostrando para vocês por ser uma aplicação eh da nossa empresa mas basicamente é isso né Eh foi foi um vídeo um pouco extenso Exatamente porque é uma é uma novidade né o angular 19 ele acabou de ser lançado inclusive vocês podem ver aí que ele tá na 19.0.0 né em alguns pacotes outros já foram para 1902 mas a grande maioria tá na

19.0.0 Ou seja é a primeira versão né do eh é a é a primeira liberação de pacotes aí da da v19 né futuramente provavelmente eles devem estar atualizando isso não deve demorar muito eh e inclusive para você que tem uma aplicação assim mais robusta não recomendo que esteja fazendo esse processo de atualização até porque nem todos os pacotes Nem todas as bibliotecas externas elas ainda Elas já estão compatíveis né com com a v19 isso aqui foi uma aplicação de teste né que a gente e decidiu atualizar e nem é uma aplicação assim que eh vai

ser tão crítica né o processo de de atualização né então por conta disso eu resolvi estar trazendo esse vídeo para vocês porque basicamente agora o angular 19 já está no ar né E a gente vai ter bastante novidade bastante recurso aí para est explorando né E desde já se esse vídeo te agregou algum conhecimento que você ainda não tinha curte compartilha ativa o Sininho para ficar por dentro das notificações se inscreve no nosso canal e é isso galera Valeu fui