Creating shared module in angular

this is part thirty four of angular 6 tutorial in this video well discus creating a shade module in angular as the name implies a shared module contains all the commonly used directives pipes and components that we want to share with other modules that import this shade module now let's look at some of the considerations to keep in mind when creating a shade module a shade module may react sport are the common angular modules like common module forms module reactive forms module etc instead of writing the same code in every feature module to import these commonly used angular modules we can react sport them from a shade module so these commonly used angular modules are available to all the future modules that import this shade module another very important consideration to keep in mind is shared module should not have any providers this is because lazy loaded modules create their own branch on the dependency injection tree as a result of this if a lazy loaded module imports they shared module we end up with more than one instance of the service provided by the shade module if this doesn't make sense at the moment don't worry we'll discuss this with an example in our upcoming videos for the same reason the shade module should not import or re-export modules that have providers finally the shared module is then imported by all the feature modules where we need the shade functionality the shade module can be imported by both types of modules that is eg loaded modules as well as lazy loaded modules we'll discuss eager and lazy loading modules in our upcoming videos this is the same project that we've been working with so far in this video series now let's create a shared module for this project and move all the commonly used pieces into that shared module I'm going to use angular CLI to create the shade module here is the command ng for angular CLI itself G for generate M for module we want to generate the shade mode in a folder called shared and the name of the module is also shared we already have the shared folder created so to have the shade module file created flat in that existing folder let's use the flat option once they shade module is created we want to import it into our employee feature module so let's use the module option and then specify the name of our module our employee module is present in the employee folder so prefix the folder name as well there we go our shared module is created and the employee module file is also updated to import this newly created Schade module notice in the shared folder we now have a new file shade dot module dot es and this file contains have a shared module the employee feature module is also updated to import the shade module at the moment in our angular project we do not have any components directives are pipes that we want to share with other feature modules if we did have any of them we will include those reusable components directives or pipes in the declarations array and to make them available to other feature modules that import the shared module will also include them in the expose array at the moment we don't have any so our declarations array is empty a shape module may react sport other common angular modules like common module forms module etc so if we take a look at our shared module notice angular CLI has already imported the common module into this shared module but at the moment within our shared module we do not have any components directives or pipes that need the common module directives such as ng F ng 4 etc so we may remove the common module from the imports array in the future if we add any components directives or pipes to the shared module that need the common module features we can always add this common module to the imports array but for now let's go ahead and delete it of our employee feature module which is going to import this shared module need the common module directives like ng F ng for so let's react sport this common module from the shared module for that let's include the exports array and export the common module notice we don't have the common module in the imports array we only have it in the exports array so this brings us to another important conclusion we can export an angular module without first importing it like this common module now notice our employee feature module also need reactive forms module this reactive forms module is such a common module we might need it in the future feature modules that we add to our application so instead of importing this reactive forms module in every feature module let's move this import statement to of a shade module and then we export the reactive forms module by including it in the exports array so at this point we have our shared module react sporting common module and reactive forms module our employee feature module is importing the shared model this means we do not have to explicitly import common module and reactive forms module within our employee feature model so let's delete all the references to common module and reactor forms module let's save all our changes and quickly test our application now let's quickly verify all over routes work home route looks good list looks good edit works fine and finally create also works fine now let's launch Pro C developer tools just to make sure we do not have any errors in the browser console there we go all looks good that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 41,948

Keywords: angular shared module, angular 2 shared module, angular2 shared module example, angular shared module example, angular shared module architecture, angular shared module best practices, angular sharing between modules, angular shared component between modules, angular shared module component, angular shared module directive, angular shared module export component, angular shared module formsmodule, angular shared feature module, angular 2 import shared module

Id: HFRAL5Msa_o

Length: 6min 42sec (402 seconds)

Published: Thu Dec 13 2018