Angular 17: Mastering Modules for Efficient Organization

hello everyone welcome back to my channnel learn by practical today our topic is module versus standalone C8 in angular till angular 16 the default structure for an angular project was modules commonly known as NG modules but from angular 17 the default structure is now Standalone component we can still use modules in angular 17 we will check that also we will first see what is modu in angular project so let us begin with the official document what does it says you can see this is the official website of an angular we can check what is NG module what is what is actually module we can scroll down we can see what is module angular modularity what does it says modules are great way to organize an application and extend it with capabilities from external libraries basically means we can organize application using modules and extend it with capabilities from external libraries external libraries such as angular also provides some libraries such as form modules HTTP Cent modules router modules form module is used to create forms and validate the forms HTTP C module is used to call the backend API router module is used to router module is used for routing and and uh we can check what other things NG module contains NG module consolidates component directive pipes into a cohesive block of functionality each focused on a each area in a project we generally have multiple blocks so we build a building blocks by having multiple components directive and pipes so we bind them into a single module and we create an application here you can see what NG modules metadata has it declares which component directive and pipes belongs to the module suppose I created a user module so what are what are the different kinds of component that particular user module will have directives and pipes in that particular particular module make some of those component directive and PES public so that other module component template can use them we can make that component directive and pipes public so that other other module and component can use it Imports other module with the component directec and pipes the component in the current module needs we can create a module and import that module in another module and we can use that so let's begin by creating an angular 17 project as a module let us open the terminal so in order to create an angular 70 project using module we use the following command this is my project name and we provide an extra parameter called hyperen No hypen stand hdn d stand alone I'm using npx but others may not require because I want to use my local version that is local CLI version which is installed in this particular folder angular tutorial atate 17 if I hit enter it will create an angular it will start creating an angular 17 project and that project will have as will have a modular structure we will will return back when the project is created here it is asking for our option like CSS scss s l we can go with uh scss or either we can go with scss okay CSS or either scss I will go with scss um it is asking for do you want to enable service at rendering right now I don't want it it is installing all the packages let it finish and we will resume back one thing I would like to say here you can see the app roting module and up module is being created and uh thing to remember remember why I'm using npx as I have multiple angular C installed in my system I want my local angular CI to create an angular 17 project so I using npx our project has been successfully created so we are using App module app routing module. TS so this is basically a using module so in order to create a angular 17 project as a module we use this command NG new and your project name happen happen no Standalone this flag means the project will be created as a module if if you don't specify this this project will be created as a standalone component let's move inside this project and see the directory structure I have opened this project in my visual studio code is the directory structure we have already discussed package package log. angular.js today our concern will be what is inside the app folder here you can see app module. TS app component. HTML app component.ts okay if I go inside the module this will contain all the component that is required in a project this ad NG module is known as decorator let us check what we are going to B project let me open MS print we will have a project a basic website which will have a header and a footer the header will contain project name and sub men home about contact us basically this all module will be a feature module this all will be feature module I hope this is clear let's begin creating the project let us Ser this project to Ser a project we will use NG ser will use NG sir I can means open this is a flag it is saying Port P20 is already in use would you like to use a different port I will say yes because my I have running another project in aort 42 here here you can see our project has run successfully it is using a different port other than P20 which is the default Port since I am running another project in a port local first 420 it is using another first thing let us verify this is angular 17 project if I go to my package. J here you can see the animation common compiler core and forms all are using angular 17 project angular 17 version so by seeing this we can know that our project is using angular 17 so let us begin creating this project okay so what are the things I will need to create a component for header first we need to to check what are the required components so basically we will create a header component and a photo component first okay so let's begin creating this two so let's create header and fter first so I will use NG either you can I can write a full G it generate component c p o n n component or either you either I can use short form n g c g for Generate C for component so I will create a shed folder inside shed folder I will have header okay so let's enter it here you can see our sh folder has been created and I have had a component inside it similarly I will create footer also not rter putter so here our footer is also created inside set folder you can see header and footer are there in this project we will be using board strap Bo strap 5 Okay so let's copy this and run this command in a terminal this is a terminal I will paste npmi npmi is the short form for install okay so npm node package manager generally we refer this as a node package manager if I specify hend D it will install it as a Dev dependency which I've already discussed in the previous video so let's enter it it will install Bo 5.3 latest wait till it finishes here you can see bootst 5.3.3 is already installed successfully how can I verify that in a dependency package you can see BU 5.3.3 is already installed remember this is installed as a dependency not as a Dev dependency I will go with example which one should I consider okay I will take this header which one I will basically I will take this simple header copy this header and use it in a project so I will view this and I will I will past the paste the content in the header component okay and let's see if boot step is so in order to use app component. HTML I will clean all this code and I will add a header component.ts over here this is a selector we can use this also as a directive but uh I'm going to recommend using it as a selector in a app component. HTML if I paste app header so let's check if our header is loaded successfully or not yeah you can see uh head has loaded successfully but uh the CSS of bstep is not being is not being implemented so let's see what is the problem if I come back to my project we have only installed buep but in order to use buep we need to bind the CSS in angular.js file let's do that first this is my angular.js file okay I need to add my buep P CSS over here so I need to go to what is the path so let's check the path what is the path this is the path for uh BST m. CSS if I go to my node module folders and I go inside my bootstrap inside my dis inside my CSS we will have a bstep mean. CSS mean means minified version where is that bp. CSS here you can see okay so I have link my B m. CSS so if I save and uh I need to rerun my project so this time I will not uh use the flag open and I will simply run my project whenever you make some changes in to your angular file you need to to run your project so here we got an error could not resolve node module boostrap D CSS boostrap m. CSS so let's see why this issue was happening as you know Ive created this project using scss so I need to map buap me. scss in my project initially I mapped buap me. CSS not scss now I have changed my part to node modules SL bo/ scss scss bo. scss okay here you can see this is my boostup fer this is my CSS okay if I go inside my CSS I can see BP m. CSS b. SC CSS after setting this path correctly if I run my project you can see our header has successfully loaded so we have resolved the postp issue now I will Implement footer Putters in my project so these are the different kinds of footer I will select this footer so I will press control U and uh I will select this one I will take this container and if I go if I pr control PM go. component. HTML and paste over here I have stopped my another project and rerun my project using the default Port as the port was keep kept on changing so it didn't help me so I change my port now if I go to my app component. HTML I will take my app footer over here and app component. HTML I will paste my app putter over here and I will take this app rout and paste it over here the project has reload successfully if I go to my project you can see head and fter is loaded successfully one thing to not that when when we created a header and footer component you can see this header and component is added in a app module dots file you need to import your header and footer component and add it to the Declaration array over here please remember till now we have implemented a header and footer and uh when we created a header and footer the component was automatically added to a app module. TS now we will create a feature module okay so in order to create a feature module we will type NG G for Generate either you can type complete sentence generate H for module you can write m o d module also I will go with shortcut NG NG means you're using angular CLI this is this all a CLI command NG G for Generate M for module my module name will be home and uh i h r routing means I want routing included in my project if I press enter it will create a module named called home here you can see the module has been created it created a home directory inside home directory I have my Module home module. TS and home routing module. TS if we check app module. TS no reference for the home module. TS is added in a app module. TS so basically app module TS is a different and home module. TS is a separate file this is known as separation of conserns like home module will be a separate module now if I create a component inside of Home NG G NG generate C4 component inside home slash boom I have created a component called home inside my home module okay so here you can see a home component has been added and one thing to remember when I add a home component the module which got updated is home module. TS import home component in home module. TS and it has been added in the Declaration and if I see my global app module dots you will not see any home component over here because the home component Belongs to Only the only to the home module so let us add HTML for our home component if I go to my home component you will see it shows only homeworks so if I go to my bootstop if I check this template I will be using this template as my home template okay not this one if I go for the simpler one I can take this as my home component okay I will copy the content this and paste in my over here how can I load this home component in a project if I go to my app component. HTML and I simply add my home app home as you can see it says app home is not is not a known element as you know home component is available inside home module. TS so it is not known to app module. TS to resolve this we will use an angular feature known as angular routing I delete that for angular routing router Outlet is the for routing we use router Outlet in order to load our home component we will use approaching module. here I will create a object and specify my path if my path is blank then I will load children basically this returns a promise this is written as a promise and we need to capture this promise you see so what does this mean so basically when whenever users will whenever the URL will have a slash like uh Local Host 4 4200 then it will load my home module okay so my home module will automatically get reloaded over here now if I go to my home routing. module dots so in know order to run this I will again create my adjac object and specify path is equal to blank and uh component will be my home component okay so this home component that has been imported inside this apprting module. now if I save all the project got reloaded if I check this here you can see my home component has loaded successfully so I will bind this inside a container let's do that oh I can B this whole thing inside a container so as you can see our homepage is loaded so how did my home component got resolved over here let's check that in order to resolve my home component main thing to remember is this router Outlet basically this router Outlet will help you to resolve your url basically this is provided by angular and in order to use that you need to add a app routing module inside your app component app module. TS okay so since home module is a feature module or separate module so home module will also contain a home module dots and home routing module. TS inside a home routing. module so if I go to my app routing. module if my path is SL okay if my path is less if my path is nothing means slash nothing okay it will load my home module inside home module it will load my home routing module so in home routing. module you can see the path is SL it will load component called home component so my home component got automatically resolved over here let us change this menu we will have another menu called laout and uh a simple page called Contact okay yeah you can see this is my header component and I need only three menus so I will delete all these three and I will keep the about component and I will once again copy this Li and have contact contact us okay these are the three menus which I want in my project if I save you can see three menus are over three three menus are here okay if I go to this menu and check we have a HF okay if I change this to slash and I reload my page if I click on home here you have an over here the page gets reload in order to prevent this angular provides as a directive called router link by using router link we can prevent the page reload let's see how can I how can we use that basically we will remove HF and use router link here you can see router link and I will specify slash and for contact I will have slash about not about a o t about oh spelling mistake about and for contact I will add contact if I run this we will get an error like uh since about and contact is not known if I inspect and check my console okay if I click on about here you can see cannot match any route URL segment so as we know we have not created any about module and uh about component so it is throwing an error and also there is no magic URL for that so let us solve that issue back to us Studio code now I will create my module for about and about and C NG generate module about let us wait till it create a module and NG generate component about it will create a component about inside about modu now create contact contact typen routing now if I create a component called Contact so it will look now it will create contact component inside my contact module now again going so in order to we have added our module and component now in order to resolve our URL again we will go to apping module. TS here I will say so path will be about and again load children I will copy this it is taking longer time I will paste this and instead of home I will go for about SL about module now this will be M do about module okay I will need one more contact and uh I will change this to contact module Ive added both the modules about and contact in my app rting module. now we need to go to the about routing module. TSS now here once again I will add my J object and the path will be blank and component will be about component about component so my about component automatically got imported if it is not importing automatically you need to import your component manually and and same thing I will do for my contact module also I will go to my contact routing module. TS and uh so contact component here you can see my contact component has imported in my app contact routing module. TS and if I save all and run this project my project has built successfully here you can see various lizy chunks has been generated okay so here you can see this is home module it is one chunk another chunk is for contact module and another chunk is for about module so this is called La chunks but uh 30 we call this as lazy loading why do we need lazy loading in order to improve the application performance we generally build a project in smaller smaller module and load that module as and when required when when user clicks on a particular page then only that particular module will be loaded back to my browser here you can see my homepage is already been loaded over here if I click on about so here you can see about works and I'm not getting any error and if I want click on contact so it says contact works and the URL also changed so if I click on you see over here my page is still not refreshing okay contact about contact about home if I about how can I keep my active menu in about tab so let fix that also back to my visual studio code in order to fix my active menu I will go to my header component I will press shortcut crl p contrl p header component. HTML okay so in order to resolve my active menu I will click on aut link active AC I will paste this in every menu so whichever menu is active over here that meu will be active if I go to my browser so I'm on about my about is selected over here if I click on contact my contact is also selected over here but uh my home is always selected so why is that happening because uh if I click on home my default you URL is slash okay if I click on about my now the UR Rel is SL about but the slash is still true so home is also active in order to fix that active rot link active option is equal to just object called exact is equal to exact col true I will paste this and this and now if I save and view my browser now you can see my active menu is resolved now suppose I have a page which does not exist so again it will so cannot match any route so if there's no such page we will show page not found okay so how can we achieve that we will check that so for uh page not F we will create a component directly page note page not F if I click enter if I enter it will create a page not font component Outside Inside the app directory and outside about home contact and the page not F component will be added directly to a to the app module. TS now in order to match if any path is not matching we will add another J object and part path will be double estri and it will load component page not F so now if I run this if I check in the browser so this is home about contact works if I say something like contact G it says page not one so this was basically an overview of how module works in the next video we will check how Standalone component works we'll create the same project using Standalone component if you find this video helpful please like And subscribe my channel and if you want anything to improve in this video please let me know in my comment box it will help me to improve my channel and improve my content thank you thank you very much

Channel: Learn By Practical

Views: 75

Keywords:

Id: QX1GNjkAUMA

Length: 40min 0sec (2400 seconds)

Published: Thu Feb 29 2024