Angular Standalone Components - No Ngmodules Anymore

in this video you will learn how to create and use Standalone components inside angular [Music] and actually starting from angular 15 we have such thing which is called Standalone components which essentially means that we should not create a module every single time when we need to create a component actually we simply move all properties from the module to the component this is why here I want to refactor angular project to the usage of Standalone components and first of all here I will write all my commands with npx minus p and glass CLI 15. this is a really nice possibility to use CLI of specific version and the first thing that I want to do is generate new component but with a special attribute Standalone this is why here we can write NG generate component and let's name it full and after this we're writing minus minus Standalone I'm hitting here enter and as you can see we are not getting here a module like it was previously before if you are generating a component it will create for you also a module but here we have just component 4 with HTML CSS and yes let's look on this module as you can see here is this module and we're interested in TS file and here it is already looking different first of all we have here Standalone true this is exactly what we must write starting from angular 15 if we want a standalone component additionally we never saw inputs inside the component essentially now it looks like we're writing not a component but a mix of component and module which means if you want to use some component of another module inside this component full then we need to import it here how we can do that in order to check this I want to generate one more component which will be bar and it is also Standalone now here inside our full component after common module we can write bar but we are not injecting one module like we typically did previously we're injecting here by component on it because essentially this is component module or Standalone component what this code allows us to do is render by inside our phone this is why here I am writing app bar and here I am closing app bar but as you can see nothing is being rendered inside our markup because we didn't register our full component inside our app module and we didn't Trend it this is why here we must jump back inside our app module and here inside Imports we are registering our full component and now we can jump inside the component HTML and render here our app full component let's check if it's working as you can see in browser we're getting full works and bar Works which actually means now we registered two Standalone components and rendered them and we didn't need to create a module for any of this component the next question that you for sure have how we can lazy load our full component because previously as essentially with laser loaded modules in order to do that I want to jump inside our app routing and here we have our routes now here we can register a new route with path for example Foo and here we must provide load component and this is a function and we're writing here an import just like we did previously so here is our full folder but here now we are not choosing module but full component and after this input we must try it then and we're getting here the module because essentially this is a module where we must use module dot for component let's check if it's working I am jumping here and in the router I am writing slash Foo and as you can see now this code is duplicated because this component Foo is already rendered inside the component and this is rendered inside our Outlet which essentially means this is how we're registering our Standalone components when we need to Lazy load them but now let's do even more interesting stuff we have our app component it is still working but we can do it also Standalone this is why here what I want to do is write Standalone true and this is it but now I really want to do the worst thing possible I want to completely remove app module TS because as we said we don't want to use modules anymore I completely remove app module and now we can jump inside main TS and use our Standalone app component here so we don't need all this code anymore because we will create our application differently and for this we have a new thing which is called bootstrap application and here we are passing our root component in our case it is an app component let's check if it's working as you can see in browser we're getting app full is not known angular element and this is completely logical because we completely remove our app module and now we're trying to render our app component what we need to do here we must register our module which we want to use inside app component this is right here we're writing Imports and here is our full component that we want to render as you can see this area is gone but now we have another error router Outlet is not known element and essentially we must do exactly the same we must input here router Outlet as a module this error is already gone and now full Works bar Works were successfully rendered here inside our markup but actually we're here on slash 4 and as you saw previously we rendered twice full Works bar works because we were inside router Outlet this is not working anymore why is that because actually here we previously used our app shouting module and we don't have modules anymore and actually what I can do here I want just to export our routes because we want to use them but actually this module we won't use at all now when must jump back inside our main TS essentially this is the alternative for our app module and here is a second parameter we must provide an object with field providers and here we want to register provide router and inside we are passing routes so essentially these routes are coming from App routing module and this is not a module this is just an array but actually here I made an error that a lot of people are doing we didn't write here inside providers an array we simply assigned here provide router and this is not correct because providers is in Array this is why we must wrap our provide router because later we will add more providers here and this is exactly how we register our routes inside our Standalone application as you can see now it is rendered correctly and the last thing that I want to show you is how we can use links because essentially we want to create some links and jump between them this is why typically we're creating a router link and let's say that it is going on slash full page so inside I will render full text the main problem is as you can see in browser this is not a link it is not highlighted and this stage reactive is not working and in order to fix that we must jump inside our app component and add here router link as an input in this case here as you can see it is working just like before and actually if you are interested to know what is injection token inside angular and how it works make sure to check this video also

Channel: Monsterlessons Academy

Views: 15,590

Keywords: angular standalone components

Id: v1omt9uVpXk

Length: 7min 53sec (473 seconds)

Published: Thu Mar 23 2023