Routing in Angular 17 and Lazyload Standalone Components

hello guys in today's video we're going to see how to set up routing in the newest version of angular so stay [Music] tuned here in front of me and actually on the screen uh we have a basic uh application generated by using angular CLI and typing engine new and the name of the application in my case it is routing Standalone components but it can be anything you type there so nothing has changed here so this is everything generated by angular CLI so you can follow it by generating the same component for yourself but before we start talking about the new approach here uh let's see what happened in the past and what is different here so I'm opening another application that I generated a long time ago uh that has a routing setup here set it up so now what the difference here uh in the past we had app module here with everything inside it like Imports browser module app routing module Etc and also we had app routing module uh where we stored all of our routes and configurations there so that's something that we had in the past but uh from now in the newest version uh by default we don't have any modules here as you can see so what's going on here Angar team has changed the uh strategy and they encourage us to use Standalone components that are uh Now default by default uh true actually so we cannot see any modules here in my opinion Standalone components are better faster and more flexible than the the previous ones we had because uh uh in the past we had to import our components into app module and do everything with them but right now when we generate a component we can move that component across our application and be sure that that component is going to work as expected we without uh changing anything in the app module or any module where we uh imported our component but what is important we can still use modules in angular if we actually need them so uh they're not out we can still use them but uh it is better and newer uh approach to use uh these Standalone components here so right now I'm going to open a terminal here so you can uh drag this here up or you can press control and back tick on your keyboard which is a button below the escape button so right now I'm going to generate uh two components here and setup routing uh into them like this so I'm typing NG new as a new uh NG sorry G as a generate and I'm now typing the name for example first so this is going to be the first component as you know uh angular is CLI is actually uh sorry NG c as a component and uh we have to just type it first for example so uh as you know angular is adding uh component next to the name of every component here so if we generated uh app first that is actually app first component if you type it generate first component that you will get first component component so that's the reason why I typed n uh GC and the first and right now I'm also going to generate a second component and you guess it call it second okay hit enter wait for it to be generated and now we can see first and second components here so we can also go to our first component and we can see that is also uh Standalone components and also our second component is Standalone so uh that's something new okay right now we can open our application to see what we actually have so running NG S as a Ser we can open uh we can open our we can actually build our application and open it but if we add a flag O it is going to automatically build and open our application after building it so it is opened in my browser let me bring it here to you I'll Zoom a bit okay we have our application on the port 4200 as you can see here so we are going to remove everything from here and to make some changes and setup actually our routing there okay now I'll move here this okay now I'll remove everything from here from the app component and I will just add H2 and call it testing routing okay testing routing and Below we have to add a prow router Router Outlet actually I said app router so we have to add a router Outlet here so where is router Outlet router Outlet is holding our routes uh and showing the content of our routes inside of this here so we have a testing routes here and also uh we have uh here we can add some navigation here so uh I'm going to add uh something like uh nav okay as a navigation and I will add a list and I'll add two list items and actually anchor link that is actually router link that is going to be in our case let's say first component okay is going to be a first component and we can say router link active this is just to be active and also uh we can just uh add a name here and call it first component and actually instead of writing this here I'm just going to duplicate this here and I'll call it second second component and also change the name here second component so we have first and second component if we save this and go back to our browser we're going to see that uh we have our testing routing here I'll Zoom it a bit here we have a testing routing here and we have a first component and the second component so we have to set up routing because if we just try to open first component here we got nothing here because we don't have a outing for this so going back to the visual studio code and uh the newest approach here we are actually going to add some configuration to the app routs here so uh like in the app routing module now here we have our routes array the same one that we had previously there so uh we can just do the following we can add uh object an object here and we can set that we have a path that is actually first component and it is actually calling our first component here that is component first component now we have set up uh first component routing for the first component and after this I'll just duplicate this and add second component here second component so just let me call it second component and now we can save it here and after this we are going navigating back actually going back to our browser and we can see that we have first component and the second component so they're not clickable right now but I'll show you what what the trick here so uh what we have to do right now here uh we have to go uh to our uh app component here and here we have to do we have to add some imports as well so in the past you importing these things in the uh app uh app module but right now we are doing it into the component itself so the next thing is going to be router link and this router link will allow us to open our component to actually have a clickable components here as you can see so first works and the second works so you can see that after adding this uh this router link here we are able to use that router link here and to open to have these links actually clickable and another thing that I'm going to add is here uh router link active actually router link active so this is actually just going to see uh if our link is active and to add something to it so for example if we want to to change stting of active link and so on and so so uh this is it right now and a bonus tip I'm going to show you also how to Lazy load these uh components so right now I'm inspecting uh this and I'm going to open this inspector here just let me bring it here and I'll just add it to the to the dock and just move it a bit up then we will be able to track our application so going back to our Visual Studio code here and here in the app routes i instead of uh second component here I'm not going to call call it like this so what am I doing here right now uh I'm using a different approach and actually using load component key load component as you can see here and now after this I'm just using an arrow function that is uh going to import something that is actually our component so first and then first component so this is the first component and uh we're just going to say then and you can call it let's say c as a component and actually just I have to add this C and uh to say C and first component here usually we're using it like a m before because it was module but right now I'm using like a c here for the component then after doing that uh we are actually having uh lazy loaded our component to be able to test that we just have to go back to our browser and right now I'll just cck clear everything and let's see the network tab here okay I'll Zoom it a bit okay and now when I click on the first component we see that nothing has changed because we have already downloaded a bundle here and the content as you can see but when I click on the second component take a look right now we can see the chunk here actually from routes that is actually our uh component so we can see from the first component we have uh we have this chunk and uh we have the data here regarding the loading so okay so actually our component is going to be lazy loaded so first one again all load we have everything here first component does nothing but the second component loads a chunk here so which means our routing works as expected so this is it when it comes to the routing in this video but in the next one we can see another different approaches and some Advanced things thank you for watching and don't forget subscribe if you like the video and see you in the next one bye

Channel: Adnan Halilovic

Views: 2,416

Keywords: angular, angular tutorial, angular standalone components, angular routing, learn angular, angular tutorial for beginners, lazyload standalone components, routing angular, angular routes, how to route angular, adnanhalilovic

Id: dT3f0KTdNyA

Length: 13min 53sec (833 seconds)

Published: Sat Feb 10 2024