Using a feature NgModule for routes - lordoftheflies/angular-essential-training GitHub Wiki

As an Angular application grows in size, it becomes advantageous to start grouping stuff into related domain areas. Let's take a look at how we can add a new feature NG module to the application and set it up with its own component and routing. So the app drops the user into a list of media items and the user can click the add media icon if they want to create a new one. The new media item form is a good example of an app feature that we could encapsulate into an NG module. Over in the code, let's create a new folder in the app directory and name that new-item. This will be where we put all the files related to the new item feature of the application. Then let's move the existing media item form component files into that directory. Now, the TS file has some path values in it that are set based on the file being in the app folder. We need to update those to work with the new location. Let's open up the media-form.component.ts file. And we'll update the import statements for the media item service and lookup lists token to change the path from a single dot and slash to a double dot and slash. This tells the import statement to look up one directory which is where these items exist. Okay, with the files moved and those path changes made, we can start to create a new NG module for this feature and set up the routing for it. In the new item folder, we'll create a new file named new-item.module.ts. We are going to create an NG module in here, so let's add the import statement to bring that decorator in from at Angular core. Then we can use the NG module decorator and pass it an object literal with an imports property and a declarations property both set to a value of an array. And below that, export a new class named new item module. The media item form component is making use of the Angular browser module which provides the core directives like NGF and NG4. One thing to note on the browser module, it is designed to be used at the root NG module level. Angular has another NG module named common module that is designed to be used in the feature modules. The common module is the NG module that contains those core directives and other stuff, and the browser module actually imports that to make it available. So let's add an import statement for the common module from @angular/common, and then add common module to the imports array in the NG module decorator metadata. It is also making use of the reactive forms module for the forms directives. So let's add the import statement for the reactive forms module from @angular/forms, and add that to the imports array as well. The other thing we want to do here is declare the media item form component in this NG module. So let's import media item form component, and then add that to the declarations array. Now we have a new feature NG module set up that contains the media item form component. From here we can add the routing for this component. Let's create a new file named new-item.routing.ts in the new item folder. We can set up the routing similar to how we did at the route app level with one small difference in how we register the routes with the Angular router module. Instead of registering them with a call to RouterModule.ForRoute, our feature module routing can be registered with a call to for child. For child helps with the route registrations without doing any of the initial route listener and initial navigation setup that is handled by for route. So let's import the routes type and the router module from @angular/router, and import the media item form component. Then let's create a const for the new item routes and specify that it is of type routes and set that equal to a new array. We need to add a route entry for the media item form component so we can create a new object literal in this array with a property of path set to add and a property of component set to media item form component. With the routes set up, we are ready to register them with the Angular router module. So let's export a const named new item routing and set that equal to a call to RouterModule.ForChild and pass that in the new item routes array. This gives us everything we need for the routing in this new NG module. Now we need to import this into the new item module. So in the new-item.module.ts file, we can add the import statement to bring in new item routing and add new item routing to the imports array in the NG module decorator. Okay, there were several steps there to get everything in place, but now we have a feature module in our application code for the media item form. The last few things we need to do is import this feature module into the route module and remove the add route from the route routing as that is now handled at the feature module level. Over in the app.module.ts file, we want to remove the import statements for reactive forms module and media item form component, and then remove reactive forms module from the imports array in the NG module decorator, and remove media item form component from the declarations array. Both of these are used within the new item module, so they are no longer needed here. And speaking of the new item module, we want to add an import statement for that to bring it in. So we import new item module from ./new-item/new-item.module. And since this is an NG module, we want to add it to the imports array. Okay, that's all we need in the root app module. One last thing to do, clean up the app.routing.ts file. So over in the app.routing.ts file, we will no longer need the import of the media item form component in here, so we can delete that. And we can delete the add route entry object literal from the app routes array. And with that, we have a new feature NG module setup in the Angular application.