Angular 17 Tutorial #17 - AppModule | Angular 17 Tutorial For Beginners

hi friends welcome back to AR tutorials this is angular 17 full tutorial series for absolute beginners as well as expert developers joining us from previous versions in today's episode I'm going to talk and teach you about app module app module is a very very interesting and important aspect when you're building angular applications I will also show you comparison between angular 16 and 17 so that you get a good understanding of app module in terms of practical usage let's get started if you have missed out on the first 16 episodes make sure that you go through them there are lot of breaking changes that I have covered as part of the series which you don't want to miss app module is the root module of any angular application that means it's the main entry point that is bootstrapped by angular when the application starts however from angular 17 onwards that is not the case and why did I mention it the reason being that if you're working on an existing application or worked on previous versions you would see that app module is mandatory every single angular application till angular 16 must have an app module I'll quickly show you that in code and then we'll continue with angular 17 so I have created angular 16 playlist on my channel make sure that you go through them here if you expand the app in the angular 16 you would see app module. DS okay that means every angular application will have a app module okay now if you go to main.ts and you would see bootstrap module as app module this was in angular 16 okay till angular 16 but angular 17 onwards everything is standalone which means you will not see app module at all in your app folder okay I have covered this in the previous episodes also if it's confusing please go and check those episodes the critical thing that you're learning is app module can still be used in angular applications in angular 17 all right but it is not there by default okay that's the most important thing that you should know here now The Decorator that is used to define the modules is called NG module okay now NG module is a you can think of it as a decorator which defines the metadata of that module NG module is used to provide configuration options for the module okay Imports now this decorator will have Imports which will tell what other modules to import inside this okay but in general think of module like a group where you pull in in all the required components modules services and create one feature thing okay now again I'll go back to angular 16 code to show you comparison because it's very important to learn and see how things are different so if I open app module you can see that it has a decorator here at theate NG module it will have declarations where you import all the components required for that module you also have Imports where you import all the modules other modules that you want to use you have providers where you can inject your services and you you can mention which component to bootstrap with okay this is a common behavior of NG module okay we will do lot of Hands-On but this is again like I said a theoretical explanations to show you what all it has so we know Imports is there which will import other angular modules or custom modules declarations is where you will import the components directives and pipes the bootstrap component tells which root component should be starting it also has providers I've shown you which is used to register the services what are Services we'll come to that later Point exports the exports property in node module will tell which components to export etc etc alternatively we can also configure schemas which will tell whether it is no errors or custom element schema okay all right so that's for this episode okay now there are different types of modules like metadata lazy loading feature module Etc we will cover them when we start learning about how to generate modules today's episode's key takeaway is that I'll make some notes for you in comparison so that way you can understand clearly all right so this is episode 17 app module okay all right number first important Point by default in angular 17 there is no app module okay till angular 16 you it's mandatory to have app module okay that's the key difference always remember so why is this important if you're building a new application you don't have to worry about app module if you're building a application which is on previous version of angular you're trying to upgrade you can have app module and it will still work as it is in angular 17 onwards angular 17 supports modules which means just like how we can create right we can create our own modules organize code accordingly you use them just like how we were using it earlier okay no change in that okay the only difference is in angular 17 we are not bootstrapping with app module we are bootstrapping with if you can see the code here if you open the main.ts you would see you have the app component itself okay it takes some configurations that are in app conf but important point to note it takes app component and not the app module okay so here we boot strap with app component with configuration configurations and in till angular 16 we are bootstrapping with app module okay these are some of the core fundamental differences between angular 16 and 17 onwards you should know them in the next episode we will start learning how to use how to generate modules in angular 17 and we will take it from there okay I'm trying to break things down for you to make it easy so you can easily understand and follow all right uh I hope it's clear I hope um I'm making things easy for you and uh best part is that you know we'll go easy step by step we'll not be in a hurry at the same time we'll try and cover almost everything that we would want to learn in angular 17 as always feel free to reach out to me in the comment section if you have any doubts I'll be more than happy to help you thank you so much for joining in the next episode we will learn about generating modules thank you

Channel: ARCTutorials

Views: 3,673

Keywords: angular 17 tutorial for beginners, angular 17 full tutorial, angular 17 complete tutorial, angular 17 live project, angular 17 project, angular 17 crud tutorial, angular 17 best tutorial, angular 17, angular 17 signals, angular 17 defer, angular 17 components, angular 17 templates, angular 17 course, angular 17 full project, angular 17 routing, angular 17 crash course, standalone components, angular standalone components

Id: OV7RtFHEb88

Length: 7min 51sec (471 seconds)

Published: Fri Mar 08 2024