Creating feature routing module in angular

this is part 33 of angular 6 tutorial in this video well discuss creating a separate routing module for a feature module and along the way we'll also discuss the difference between router module for route and for chain methods at the moment all our application level routes that is home empty path and wildcard routes and the employee feature routes that is list create and edit all these routes are present in this one application level routing module app routing module now here is what we want to do for separation of concerns and ease of maintenance we want to include only the application level routes in this app routing module the rest of the routes that is the routes that are related to our employee feature that is list create and edit we want to move them to a separate feature routing module and let's place that feature routing module file in our employee folder let's name this file employee - routing dot module dot TS now before we write any code let's quickly understand the standard naming convention used to name these feature routing modules at the moment we are creating a routing module for employee feature so we prefixed the feature name in this case employee and because this is a routing module we append - routing dot module similarly if we are creating a routing module for a login feature the file name would have been login - routing dot module and the class name in this file is employee routing module similarly within a login feature routing module file the class name is login routing module now the code in this file is going to be very similar to what we already have in this app routing module so let's make a copy of this and then change the weights that are required first let's change the name of this class from a protic module you employee routing module let's move to the top of the file we need ng module so let's leave it there we also need router module and routes types so let's leave them there as well we need list employee component and create employee component but we do not need home component and page not found components in this file because this file is going to have only the employee feature related routes and we need to fix the path to these two components right here because the components and the module file are present in the same folder we don't have to prefix the folder name as far as the routes are concerned in this employee routing module we only want the employee feature related routes that is let's create and edit so let's remove the application level routes that is the Home route empty path route and the wild-card route now here's the important bit to understand in a feature routing module like this employee routing module we should be using for child method instead of for rude to register our feature routing module routes like let's create and edit in this case there is a specific reason for that we'll discuss that reason in just a bit but before that instead of using for route let's use for child finally we re exporting the router module so the module that imports this employee routing module will have the router module directives available now in our case employee module is the only module which is going to import this employee routing module at the moment our application works just fine irrespective of whether we re expose this router module or not because the employee module which is going to import this employee routing module does not have any top-level components that makes use of this router module directives like router outlet router length etc so irrespective of whether we reacts for this router module or not at the moment our application works just fine but to be future-proof I'm going to leave the router module X right here now let's quickly understand the difference between four route and four child methods in our main application level routing module we use for route method whereas in all the feature outing modules like this employee routing module we use for change method so what's the difference between these two methods well for root method registers the specified routes it also creates an instance of the router servers and registers said with the anglers dependency injector for child method on the other hand only registers the additional specified routes and tells angular to reuse the router service instance that for root has created why is that well Angliss services are single turns so to ensure that there is only one instance of the router service for route method should be called only once in the main application routing module in all the feature routing modules for child method should be used to register the additional routes when the for child method is called angular router knows it has to only register the additional specified routes and not to re-register the angular router service this way angular ensures there is only one instance of the router service so that key point to keep in mind here is that for root method should be called only once in the main application routing module and in all the feature routing modules like this employee routing module for child method should be called now all over employee feature routes that is let's create and edit are present in this employee routing module so let's delete those three routes from our main application level routing module let's also delete the associated import statements our final step is to import this employee routing module in our employee feature module we also need to include this employee routing module in the imports hooray at this point let's save all our changes and take a quick look at the browser there we go we have our home route working let's navigate to the list route that's feared we see the page not found component view template let's navigate the create route same thing let's try and edit an employee same thing here as well let's launch browser developer tools to see if we got any errors we do not have any errors but at the moment none of our employee feature routes are working so let's understand the reason for this now if we take a look at our route application module map module notice the order in which we have imported a protein module and employee module we have imported a protein module first and then the employee module because of this order the routes are registered like this first the app routing module routes home empty path and wildcard and then the employee module routes list create and edit so at the moment of a home route and empty path routes work but none of these employee feature routes work that's because this wildcard route is matching all the other routes so we are not able to get to any of these employee feature routes now if we comment this wildcard route within our app routing module the rest of the employee feature routes work let's quickly verify that so in our app routing module let's comment this wildcard route notice now our edit draft works let's verify create works lest works home works so at the moment all our routes are working but commenting the wild-card route is not the right thing to do because if the user tries to navigate to a route path that does not exist we want to display the page not found component template now if we uncommon this wildcard route our employee get out stop working again notice now again none of our employee feature routes work so to properly fix this all we have to do is change the order in which we import employee module and aprotic module first import the employee module and then the app routing module this ensures all the employee feature routes are before the wild-card route so for this very important reason all feature modules should be imported before uploading module so in our route application module app module let's import this employee module before the app routing module with the change we just made all our routes including the employee feature routes should work as expected our wild-card route also should work if we try to navigate to a route that does not exist we see the page not found component template as expected that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 26,870

Keywords: angular multiple routing modules, angular 2 multiple routing modules, angular feature routing module, angular feature module with routing, angular routing feature module, angular routing in feature module, angular 6 feature module routing, angular 2 feature module routing example, angular feature module routing, angular routes order, angular feature modules vs routing module, angular feature routes not working, angular routing feature module not working

Id: puscOjMyouc

Length: 9min 52sec (592 seconds)

Published: Mon Dec 10 2018