Angular 15 to Angular 16 Application Migration | Angular 16 upgrade steps

hey hi one welcome back to new video so in this video we're going to understand the steps to make conversation of an angular project from 15 to 16 all right so we'll understand what all the steps which we need to and as of now and congratulations so from 6 we are conversion or we making a migration of an angular application from 6 to 16 and this is going to be a last video of an angular migration because 16 is the latest version as of now latest version of an angular application the 16 right so we're going to see all the steps which we can able to do on migration of an angular application from 15 to 16 all right so like if you find any issues while doing in migration please let me know in the comment section as well and uh without basting much time let's get started all right the first thing what we need to do is is so uh this is my angular application folder which you guys know if you followed all the series Mees you might know this but yes so let me open this project or let me open command PR inside this particular folder or the directory itself and first what the first thing which always we do is what is the current version obviously this has to be 15 version which we are going to do the migration from 15 to 15 so that's let's do a cross check whether we have a 15 or which is more than that so very simple just we need to run a command called NG version so this is going to give the version of an angler which is there in this particular project all right so the next thing I have already opened the project in Visual Studio code itself and if you see all the dependencies are at 15th version of an angular right so if you see the dependencies which is cod dependencies which helps to run our application and the dev dependencies which helps to create an development environment so all the dependences versions are at 15 right so if I see in the Comm drum as you see over here the angular CLI version is 15.2.2 which is angular 15 version right and the node which I'm using or which the angular 15 version requires is node 16 which we have done in our previous video from migration of an angular application from 14 to 15 you might have uh known that right yes so now we going to do our first step first step in the sense we going to upgrade all our codependencies a codependency which helps to run our angular application all right so in that first one is animation right so animation which is the 15 so now what is the command to run this animation okay so just you need to come to your command from and this time since angular 16 is the latest version it doesn't require it doesn't require to give version number itself cor which means just you need to run this particular command W here which is npmi at angular SL angular which is this one okay npm I at angular / animation this is going to install the latest version of fang which is there currently which means 16 obviously right so just click on enter and wait until this gets completed once this is done we can go ahead and upgrade the next dependences all right so let's wait for this to get completed all right cool okay so this throw an error for me as you can see in the screen so it won't able to install it so what I'm going to do now is very simple so let's run this okay so npm I add triangular so as you can see in the screen I tried to install this at time/ animation dependencies so it thow an error so what I'm going to do I'm going to specify the exact version number of in 16 version of angular right so just you need to give X here that version which we are going to use is very simple I have already choosed it which is 16.20 is the stable version which doesn't have which has very less as compared to all other 16 version of dependences or yeah so let's install this one and just you need to click on enter and wait and until this gets completed all right cool all right as you can see in the screen so I tried to install this angular SL animation dependences of 16 version right so again we got an error so now to solve this the first thing as per this see we don't know everything right we need to understand this let's understand this first thing if you see the error which says angular cored 15 version so that's why it's throwing right but what I believe is the node version so we have 16 version of node and we are trying to install a dependencies of an angular which is 16 so I doubt that node 16 is not getting supported for angular 16 so probably there is a option where we need to upgrade our node from 16 to 18 as well okay now the first before doing that there is one more approach I'll show you let's check with this whether this works we'll go with this or we'll upgrade our node all right so just give this Dash here okay so we just forcing to install this a 16 version of an dependencies so let's let's see whether this gets installed or we need to go for the um node upgrade as well so probably this might work and yeah let's see this all right so let's wait until this gets completed all right cool as you can see here our method Works which is our dependency being upgraded to 16 version so let's go to our Visual Studio code and check as you can see the animation dependency has been upgraded to 16 version of the angular right so now upgrade the next one so with the same thing all right so just what you have to do you need to go to your command pH and run you just need to run this particular command to update the common and specifically I'll give the version okay so 16.20 is the version specific version and we force to install it okay so let's install it all right so let's wait until this gets completed once this is done we'll go ahead and upgrade the next dependences which is the compiler as you can see common is 15. 2.9 so once this is done we can see this is going to be 16. 2.10 itself all right so let's wait until this gets completed all right cool I think can see here the common dependen is also been upgraded to 16 version of angular so we'll go to our Visual and cross check as you can see it's been upgraded to 16. 2.10 so the next dependencies which we have is compiler right so let's upgrade this one and just you need to run a command work here same thing so which is we'll come over here and this is the command which you need to run which is npmi at angular SL compiler all right so at the version specific version 16. 2.10 all right so let's for this to get installed all right good so just click on enter wait until this get completed okay as you can see here the code dependen is also been upgraded to 16 version right so now oh not code dependencies the compiler dependencies now we are going to upgrade the code dependencies right yes the code dependency the next dependency which we are going to do the upgrad to 16 version right so let's go to our Comm from here very simple same thing which we have done for the previous one just you need to run this particular command and and give at 16.2 point10 16.2 point10 w here very simple and just click on enter and wait for this to get completed and if you see if I go to our package.json we have done or we are doing this one and still at the core level we have forms platform browser and the router for more dependencies one this is done we are going to complete all the dependencies that means the code dependences and also I want you guys to concentrate one more thing here you see which I have told in the previous videos as well but again I'm repeating the same thing that see based on the project requirements what are the dependencies are required only those dependencies are there in this project okay so if you're working for a company and if you have like a little bit complex project if you use like design alerts or some JavaScript behavior of dependen which supports for animations kind of whatever it is so if for those dependencies version angular 16 is not able to support means you need to upgrade that third party dependencies as well for example which includes an angular called material which I not using because that doesn't requ for this project okay so whenever it is required and if that particular dependency doesn't support for the version of our angular which you're using you need to upgrade that as well and very simple which I have told in the earlier video as well you need to go to website called npmjs.com and there you need to pick the stable version which supports for the version of angler which you are using in this case which is angular 16 okay so concentrate and don't foret forget about this and make sure if you find an issue or you could not able to find the solution just let me know in the comment section even me or people uh who want who already know the solution they might get reply and also I'll try to reply as soon as possible all right so let's wait until this gets completed as you can see here okay here we got an error simply I was saying everything but yeah I didn't forgot to give the flag here let's give the flag quickly and uh we need to wait this again all right so it doesn't make much time make this fast forward so that this can be little bit faster all right so I forgot to give the flag and make sure if you face the issue me then you give the flag or else doesn't able to give the FL all right cool so once the core is done we are going to upgrade the which one forms dependency all right so let's wait until this dependency gets completed all right cool as you see here the for the compiler as you see here the compiler depend has also been upgraded to the latest version which is angular 16 all right so now what we have to do we'll go for our Visual Studio code to cross check see the comple has been upgraded the core also been upgraded so now let's upgrade this probably I'm just seeing this dependen is name reverse order but yeah so the next thing the next dependent which we need to upgrade is forms so let's go to our Command form and just we need to enter this particular command work here and just give an at and just give 16. 2.10 and click all right we just give a f flly so and just click on enter and wait until this gets completed all right good as you see here the form dependen also been upgraded to the 16 version as well so the next one which we have is the platform prot form dependency 16 version is there obviously so next we'll upgrade the platform browser dependen and again we'll go back to our from again so just like this and at 16. 2.10 and give a flag over here and let's wait until this gets completed once this is done I guess we have two more which is platform browser Dynamic and platform brow sorry platform browser Dynamic and the router okay and what are the flow or the sequence order I'm going I'm request you guys to please do the same thing or else there's a chances of getting errors and again you need to uninstall the dependencies and reinstall it that's the lot of crazy things all right so let's go one by one and U let's come to the migration in a cool and right cool all right so let's wait until this gets completed and then we'll go for a platform browser Dynamic dependencies to get upgraded all right cool so taking a lot of time all right cool so this has been upgraded the platform browser so now let's upgrade the platform browser Dynamic dependences all right so let's go back to our Comm from again and just we need to enter this particular command which is npmi at tangular SL platform browser Dynamic at 16.20 all right so just enter this and click on enter and wait until this gets completed one this is done we can go ahead and upgrade the next one so what we have the next one the rter okay very important dependency between Cod yeah everything is important U and one more thing sometimes you'll face an issue related to Zone doj if you see at zone.js so my version is still at 13 which means upgraded only whenever you get an issue okay if uh your application is working fine then it's okay see still I have and upgraded to 14 Zone 15 16 oh 15 so 16 I'll see whether if I finish an issue at zone. I upgr it to 16 but I got an issue when before it was at 6 I got an error when I'm doing the migration of and 13 got it the difference so as of now I haven't get for 14 even for $ 15 if I find an issue uh while upgrading the 16 U uh angular version or or migration so we'll upgrade the zone.js as well all right so we'll see if you find an issue we'll go ahead okay so let's see whether this is get oh again same thing let's give the flag quickly uh because as of now we didn't ever follow or we didn't added our uh for flag right so that's the reason I'm just forgetting again and again but yeah so since you're seeing what here you can able to do it all right good so the next one which we have is a router so let's wait until this gets completed and we can go ahead and upgrade the router dependencies as well all right so let's Wait Almost uh the platform browser Dynamic being getting completed so let's wait we need to wait for this to get completed and here four more Dev dependencies we have that also we'll do the gradation so here yes this is done so the last codend which is router npmi at triangular SL router at 16.2 10 okay just click on okay give the fly and click on enter and let's wait until this gets complete all right cool as you see here the router dependen is also been upgraded to 16 version all right so now the next thing which we are going to do we are going to upgrade the angular Dev dependences all right so Dev dependen over here in the first one we have angular devit SL build angular all right so let's upgrade it this one also okay so very simple let's go to our com from and just you need to enter this particular command npmi H angular Das devkit / build angular all right so here the version the stable version for this is 16.2 7 okay so the version is 16.2 point7 so just click on enter and wait for this to get completed and usually especially this particular dependency will take a lot of time so have patient and relax and CH all right so let's wait until this gets completed all right cool as you can see over here the devate dependence also been upgraded to 16 version of angular as you can see over here right so let's upgrade the next one which is angular SL at CLI all right so just go to our Command Prompt and just enter this particular command npmi at angular / C and give at 16.2 7 all right so give a flly as dasf to install it so just click on enter and let's wait until this gets completed so once this is done we'll go ahead and upgrade the compiler CL and the language service and we'll start our application once these two are done and that is the most crucial part of our migration we come to know what all the errors will be or are there or which going to come all right so let's wait until this particular depend gets completed and we'll do the next one all right cool as you can see here the angular dependencies C also been upgraded all right compile also been upgraded so now we'll go for here yeah C been upgraded so now we'll upgrade the compil ca as well all right so just you need to go to your command prom again very simple same step so just this is the command which you need to use and the version is different 16.2 10 again so which is very stable that particular dependency or the version of dependencies which we are installing it okay so and let's give a flag a for flag and click on enter let wait until this gets completed all right so and when this is done we have our last one which is language service um yes let's do that as well and we can go ahead and start our application all right so let's wait until this gets complete all right cool as you can see over here the compiler CLI also been upgraded to the 16 version of angular so now we have left out with the last one which is the language service all right so let's go back to our Command Point here and just we need to enter this particular command which is npmi at tangular SL language service and the version which we are using is 16.2 point10 and give a flag dasf or D- Force anything is fine all right so just click on enter and wait until this gets completed all right cool as you can see well here the language service dependent is also been upgraded so if I go back to our package.json as you can see all our Dev dependen is also been up to 16 version of an angular and also the codependencies as well all right so now we'll go back to our com from again and what is the step very simple we need to start our application with the command and NG so just click on enter and wait until this gets started so whatever the issues will come we'll get here itself when we start our application and in the meantime what I'll do is so I'll start my backend application as well so if there is no issues me okay my backend application is Java and uh you can use any backend application you want but main thing we concentrating on angular migration all right so let's wait until our application get started all right cool as you see guys we started our application and if you can see this message which pleas compiled successful and congratulations this is followed the steps which means whatever the steps which we and you guys followed is perfect we have choose the very specific version of on angular or the dependency version It's suitable and as you can see we didn't get any errors means all of the error got fixed during our migration itself which means we followed in a very sequence order and this go perfect all right so now what the next step very simple just to test the application whether it working perfectly or not cool yes so compile and congratulations good so here I already started my back end application also backend application springboard also if you don't know how to make a Java backend application main we already have a playlist called Spring boot tutorial go please to check that all right so now we'll go to our browser so this is how our application started and by default it will be running at the port number 42 by default since it's a local port number and uh if you're working for a company it would be different you'll be having a Endo B there right yes so now okay so let me give a username over here and the password and we'll sign in all right cool sign in okay log in successfully we got an all for here and click on okay so we have read to the application or the website we have logged in successful right so this is just a simple application where it's an e-commerce website where we can able to buy Electronics components like ardino gas sensors aut sensor LED lights wires everything which is related to electronic components all right components all right cool so this is how the application look like and application loaded perfectly work here and here is the components category which means based on the category we can able to choose the product and we can able to buy in this particular application itself so if I click on sensor if you see So based on the sensor category we can able to CD sensor products work here right like temperature sensor ultrasonic sensor gas sensor module I sensor that's it so let's go back and if I take the other one like battery so the battery has two different products of bory battery category right so 3 volt and 5 Vol battery cool so now we'll go back again let's say you want to add anyone to the card so let me add this ultrasonic sensor item added we got a message and temperature sensor and there is an new issue not to our migration which was there earlier itself so I'll go inside card that image size is too big that I have make it I need to make it reduce but yes so if you see this will come under a single line but the image got bigger so that's why the line coming at second one which is the product name and the price of that and again the image which is gas sensor module so sorry temperature sensor module and the price the total is also there so we can click on this small check out button both here like this you'll get up just a dummy fake portal work here you can just need can enable the UPI uh just a dummy payment portal that's all so just click on pay you see as order place click on okay and that's it live cool so now let me log out from here okay so application is working fine I hope you guys able to understand how we can able to do an angular application project migration from some from starting 6 to 16 as well and thank you for that from scking on from the first video of an migration of an angular application from sixth version of an Ang migration from first video to the 16 migration of an Ang application thank you for that and also there are a lot of more videos are coming up and please do stick on to our YouTube channel as well and please support us as well all right so if you like this video and if you're able to do the migration means please do like this video and also if you're new to our Channel Please Subscribe it as well and please do share this small little cute channel to your friends teammates colleagu and also for your Juniors all right so we all together learn and let's learn the art of learning so please subscribe the learning Mighty so let's meet in your next video Until then take care goodbye bye-bye

Channel: The Learning Mighty

Views: 3,484

Keywords: #Angular10Upgrade, #AngularTutorial, #AngularMigration, #Angular9ToAngular10, #Angular10Features, #WebDevelopment, #FrontEndDevelopment, #Programming, #SoftwareDevelopment, #UpgradeJourney, Angular11, Angular12upgrade, Angular12to13migration, angular13, angular13migration, Angular14upgrade, Angular14, angular14migration, Angular15, Angular15to16

Id: iP_N6S1-ZbA

Length: 28min 59sec (1739 seconds)

Published: Fri Oct 27 2023