At this point, we have set up the routes so they work the way they should. However, this approach doesn't scale so well. As your application grows, more and more routes will be added to the routes.ts file. Just like we moved the components and other constructs into their respective feature directory, so should we move the routes to where they belong. Our routing list so far consists of one route item belonging to the timer feature, two items to the task feature, and one route that points to the default route /.

Our cleanup work will consist of:

• Creating one dedicated routes.ts file per feature directory
• Calling RouteModule.forChild in each feature module that has routes
• Removing routes from any root module that isn't strictly application-wide, for example ** = route not found

This means that the application structure now looks something like the following:

/timer
  timer.module.ts
  timer.component.ts
  routes.ts
/app
  app.module.ts
  app.component.ts
  routes.ts
/task
  task.module.ts
  task.component.ts
  routes.ts
  ...

After the creation of a few more files, we are ready to initialize our feature routes. Essentially, the initialization is the same for both /timer/routes.ts as /task/routes.ts. For that reason, let's look at one of the routes.ts files and the intended change:

import routes from './routes';

@NgModule({
  imports: [
    RouteModule.forChild(routes)
  ]
})
export class FeatureModule {}

The point here is that moving routes from app/routes.ts to <feature>/routes.ts means we set up the routes in their respective module file instead, namely <feature>/<feature>.module.ts. Also, we call RouteModule.forChild, and not RouteModule.forRoot, when setting up feature routes.