Creating feature module in angular

they say spot 32 of angular six tutorial in this video we'll discuss creating a feature module in angular let's understand this with an example this is our root application module path module the first thing that we want to do here is organized these input statements Abed first we want our angular module imports we have that already here followed by that we want to include the import statements that import our own modules at the moment we only have one user-defined module and that is the app routing module which contains all our application routes so let's move this import statement after we input all the end love modules and we have an extra slash here we don't need that so let's get rid of that and then followed by this let's include the import statements for our services at the moment within our application we only have one service and that is our employee service and then finally let's import all the angular components now notice at the moment all of our application components directives pipes and services are in this one module as we add more features to this application this module is going to get more complex and extremely difficult to maintain what we want to do now is move all the employee feature related components directives pipes and services into a separate feature module let's name this new feature module employee module we're going to use angular CLI to generate our new feature module employee module here's the command for that ng for angular CLI itself G for generate M for module the name of our module is employee module and we want this employee module to be generated in this employee folder we already have the employee folder so we want this new module employee module to be generated in that existing folder so let's prefix the name of the folder which in our case is employee since we want this new module to be generated flat in that existing employee folder let's also use the flat option once this employee module is created we want to import this feature module into our root application module and to specify that we are going to use the module option and then specify the name of the module into which we want to import we want to import this employee feature module into a root application module app module there we go of a new module employee module is created and our root module is also updated to import it so if we take a look at our project notice within the employee folder we have a new file employee dot module dot es and this file contains our new feature module employee module and that root module is also updated to import of a new future module employee module let's actually move this input statement next to this line so we have all our user module imports at one place and the imports array is also updated to include our new feature module employee module now what we want to do is move all the employee feature related components directives pipes and services into our new feature module employee module at the moment we have these two components create employee component and list employees component so let's move these two import statements into our new feature module we also have to include them in the declarations array now notice they said squiggly under the file paths here that's because these file paths are incorrect for the module file and the components are in the same folder employee so there is no need to prefix the folder name if you remember our create employee component uses reactive forms module directives so if we take a look at the view template of our create employee component notice this form Group directive it belongs to reactive forms module now for our employee module to work properly reactive forms module need to be available for this module one way to do that is by importing reactive forms module into this employee module another way is by creating a shared module and then re exporting reactive forms module from the chaid module so any module like our employee module that imports the shared module will have the reactive forms module available but is this creating shared module in our upcoming videos for now let's see what's gonna happen if we run this project without making the reactive forms module available to our employee module we need to do one more change within our route module app module since we have already moved great employee component and list employees component to our employee module let's delete them from the declarations array let's save all our changes and take a quick look at the browser notice the webpage doesn't display anything and we have an error in the browser console can't bind to form group since it isn't a known property or form we have this error because the form Group directive belongs to reactive forms module and this reactive forms module is not available for our feature module employee module at the moment we are importing reactive forms module in our root application module app module but we know none of these components uses the reactive forms module directives so we don't need to imported in our route module we actually need it in our feature module employee module so let's move the import statement into the future module we also need to include this reactive forms module in the imports our I notice now we do not have any errors in the browser console and our application works as expected now notice within our new feature module employee module we also have imported ng module it is required here because for this class to be an angular module we need to decorate it with that ng module decorator notice we are also importing common module why is this common module required here well most of the angular basic directives and pipes like ng F ng for decimal pipe etc are available in this common module so for these two components great employee component and list employees component to be able to use those common directives and pipes we need common module now let's comment this line which imports common module and see what's going to happen notice the page doesn't display anything and we have errors in the browser console can't bind to ng class can't bind to ng F so all these basic directives are available in this common module let's uncomment this notice now the errors are gone and the application works as before at this point you might be wondering when these two components create employee component and list employees component when these two components are in our route module app module the application was working just fine we did not explicitly import common module so how are the common directives like ng F and ng 4 are available to these two components when they were in the root module now notice in the root module we are not importing common module but we are importing browser module now if you want and why is browser mode you require well it is required for providing the essential services to launch and run a professor application but also module should be imported only in the root module and that - only once and the interesting point to keep in mind is this browser module imports and re exports common module so all the common directives provided by the common module are available for the components within the root module whereas in a feature module like employee module since we have already imported browser module in the root module we cannot again do that in the future module so for the common directives to be available in the future module then we import common module into the future module a better way would have been to import this common module into a shared module and then we exported from the shed module so all the feature modules that import the shared module will have these common directives available we'll discuss how to do that in our upcoming videos when we discuss creating a shared module now with the refactoring we have done both these components create employee component and list employees component now belong to this feature module employee module let's try to use this create employee component within our home component and see what happens now if we take a look at the component class for this great employee component the selector is AB - create - employee now let's use this selector within our home component and remember home component is present within our fruit module so just above the image let's try to use this selector notice we have an error at create employee is not a known element this is because by default components directives and pipes that belong to a module are available only within that module so for example create employee component and list employees component belongs to this employee module by default they are available only within this module now if you want to make these components available to other modules that import this employee module then we will have tree for these components in our case we want to make available let's create employee component to the root module which imports this employee module so let's include exports array and then include create employee component within that notice now we do not see any errors and when we navigate to the home route we see create employee component displayed and below that we have the employees image now since we are exporting create employee component from this employee module this component is available to all modules that import this employee module now on our home route we do not want to display this create employee component I included it to demonstrate the export functionality so let's delete it from the view template of our home component now just like how we can export our own components we can also react sport imported angular modules at the moment within our employee module we are importing reactive forms module now if you want the directives of this reactive forms module available to all the modules that import this employee module then all we need to do is export this by including it as part of this export array now in our case this employee module is imported by route module and we know none of the components in the route module uses the directives provided by this reactive forms module so there is really no need to export it and similarly our route module doesn't need this create employee component so let's delete this entire exports array now if we take a look at our route module notice our employee service which belongs to the employee feature is still here with the services it works just fine because when a service is provided at a module level the service is registered with the route injector and it's available to all the components across all modules in our in application but a better approach would be to move this employee service to a de alva employee feature module or to a separate core services module but discuss moving this employee service in our upcoming videos now let's take a look at this app routing module they created it and one of our previous videos in the series notice we have all our application routes including the employee feature related routes like listing employees creating employees and editing employees within this app routing module we only want the application level routes like the Home route empty path route and the wild-card route the employee feature related routes that is let's create and edit we want them to be present in a separate routing module well discuss moving these routes to a separate routing module in our upcoming videos so with all the refactoring that we have done so far our employee feature module looks like this and our route application module app module looks like this now I have to warn you both these modules are going to change slightly when we implement other modules like shared module whole module feature routing module in our upcoming videos that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 33,653

Keywords: browsermodule vs commonmodule, angular feature module structure, angular feature module example, angular feature module folder structure, angular cli feature module, angular 2 feature module example, angular 2 create feature module, angular generate feature module, angular feature module tutorial, angular what is a feature module

Id: 5_DiALgzvCw

Length: 14min 2sec (842 seconds)

Published: Wed Dec 05 2018