Angular 18 Upgrade Guide: Everything You Need to Know

Hello friends welcome to my channel hiis in this video Let Me Explain how to upgrade our angular application into angular 18 for doing this upgrade let me go to the angular update gate if you searched in this Google like angular update G you will get the link and also I have included in our video description okay so here we have to choose the from version uh defaultly it is 17 add then to defaultly it is choosed the latest version okay so in case your application developed in the lower version like angular 16 then you have to choose similarly you can change the two version also okay for in this video I'm having one angular application that developed in angular 16 that I'm going to upgrade into angular 18 so this is not a basic application there I have done the basic Trad actions using ngrx and also I have used the material packages okay first let me show you the application so you can see in these packages it is angular 16 and our application also in the running mode okay so the records are loaded I am able to do the update okay everything is working fine so next we have to start the upgrade so before that let me go to the Gade once again so our from version is angular 16 and the two version is angular 18 okay so now we are getting one warning so that says we cannot directly execute this en update query for doing this upgrade for more than one major version at a time so that means we cannot directly upgrade our angular application from 16 to 18 we should upgrade our application from 16 to 17 then we have to do 16 to 18 that is the procedure okay and you may have one doubt so if you created a new application in angular 17 and angular 18 so you can can see the default template is Standalone template but from this angular 16 you have the model based template only okay but while doing this upgrade whether it's going to affect anything definitely no the angular introduced this Standalone template from this angular 17 at the same time they are providing the support for model based template also okay so so anyway I choose to the from version is 16 and the two version is 17 okay so then this application complexity we can use this basic and I having this material UI so let me click show me how to update so here we have the steps we need to do one by one so here I'm just classifying into two important things we need to keep in our mind the first thing is we should have the proper environmental setup and the second thing is we have to see there is any duplicated items okay mostly in update command will resolve most of the issues if something is breaking we have to work manually okay so first for the environmental setup point of view we need to look at the nodejs okay so if you are upgrading this into 17 this 18.13 is fine for the angular 18 we should have the 18.19 in case if you have the lower version make sure you have to update your node GS okay from my side already I have done this setup see my node version is 22 okay and the second thing is this uh typescript for angular 18 we should have a 5.4 R latest so in this case we don't need to execute any command once we executing our NG update command it will update automatically so finally we have to upgrade our Global angular CLA so this is the command if you executed it will update automatically so in case if you are facing any issue make sure you have to use this uninstall command it will uninstall your Global angular CLA then execute this command it will install the latest version that means angular 18 so I have done the steps already see my angular CLA is 18.0 okay so the next thing is we have to execute this update command so let me copy this one so application in running mode uh then we can stop this one okay so I will include all the respective commments in our description so it's saying we have some changes make sure you have to commit okay the commit is fine next executing the same Comm and see some of the supporting packages also upgraded this animation common compiler these are the core libraries so the first level of update and migration is completed we can review the changes from our angular Json this Brower Target is changed into bu Target okay and next in our package. JSM see most of the core libraries are upgraded into angular 17 see this animation common compiler core forms then this router and then we how to upgrade this angular cdk material UI and this ngrx related libraries okay first we can upgrade the cdk and material so before that let me commit the changes okay I'm having the commands again the same NG update then we have to provide the library name with the version okay so let me execute them okay the packages are updated uh now the migration in progress okay the migration point of this material side there is no change okay and in this edk side also there is no changes so again we can review the changes so it is just upgraded our cdk and material into angular 17 so the next thing is uh we got to upgrade our ngrx related files so again I'm just committing the changes and for the update command okay for the ngrx point of view I'm having the packages store router store effects and store Dev tools okay so that's what I'm going to update those libraries so additionally if you are using any external packages also those are supporting for angular 17 then make sure you have to update into the respective versions okay okay see the dependency is updated in our package.json okay the update is completed again we can review the changes so the libraries are updated into angular 17 and in our app. model some changes are included okay so finally I am executing this npm install command if the there is any dependency issue it will tell you then we have to upgrade the particular Library also okay okay now in our case uh some vulnerabilities are there other than that there is no error so let me run the application and we can verify whether we are getting the same output because the upgrade point of view we have upgraded all the libraries but make sure we have to confirm the functionalty also work fine or not okay application ran without any error see the application is loading so in case if I'm doing one H it okay it is working fine so now we have completed the first level okay so we upgraded our angular application into angular 17 so next I'm going to upgrade this application into 18 okay so the steps are same now the from vers is 17 and the updated version is 18 see the steps so the first one is not GS any we have the latest version 22 it's fine then we have to execute this NG update command okay so here we can see this core and CLA uh we can upgrade this material way and cdq also in the single shot let me prepare the qu okay and other two packages one is material UI at8 and another one is cdk so let me copy this command so parallely just committing this existing changes and I stopped this running application and and executing these commands so again it will update our packages and also make sure it will do the migration activities okay see first of all it is updated in our package JSM with the version 18.0 so next it will install the respective packages also in our application okay it it's saying select the migration that you would like to run R so if you choose the space it will ask for the selection so in our case we can just click this Ender button okay okay the update is completed uh the most of the packages are upgraded into Ang 18 except the ngrx libraries and from our app. model we can see some of the changes so we can see in this provider s this provide HTTP client included and this with interceptors from De that also included and this HTTP client model is removed okay so instead of that only this provider is included so in our strand template also we will use the same provider only provide HTTP client and there we will use the with interceptors okay only difference is here we can see from da and then our app component is bootstrapped other than that I don't think any new changes so finally we can execute our ngrx update commands also so let me commit this one then executing this command okay the updates are completed again we can review the changes okay the ngrx libraries are upgraded from angular 17 to angular 18 additionally it is installed one more package ngrx operator okay so next in our app. model this item is included and in our app effect side we have some unwanted changes that we can remove so let me undo this changes okay so similarly in our associate effect also so next let me execute our npm install command we have a warning there is some vulnerability item so other than that there is no issue okay so let me run this application and we can verify whether our fality also working fine okay application running without any error our grid also loaded we can verify this update functionality and it's changing level into level three okay updated same way if I'm trying to remove the remove FAL also working fine so we can see our package file see it's completely in angular 18 Okay so in our case we executed our commands it's executed successfully there is no error okay so in our case also we can expect the same but in case if you are facing any error so like it may due to the dependency Library okay in this case we have to choose the dependent Library first we need to upgrade the dependent Library so after that we have to execute our normal libraries okay so mostly the core libraries not going to make any issue but the additional packages that may included in our application so there we can expect some error okay anyway we have successfully upgraded our application into angular ATM so still if you have any doubts or clarification please post in the comment box and also please don't forget to subscribe my channel thank you thanks for watching

Channel: Nihira Techiees

Views: 535

Keywords: Angular 18 upgrade, Upgrade to Angular 18, Angular 18 migration, Angular 18 new features, How to upgrade Angular to 18, Angular 18 tutorial, Angular 18 release, Angular 18 update, Angular 18 step-by-step upgrade, Angular 18 improvements, Angular 18 changes, Angular 18 installation, Angular upgrade process, Angular 18 benefits, Angular 18 enhancements, Angular version 18, Upgrade Angular project, Angular 18 guide, Angular 18 best practices, Angular 18 what's new

Id: OALcxBzNEUE

Length: 14min 53sec (893 seconds)

Published: Sun Jun 23 2024