Search⌘ K
Home
Courses
Learning Angular

Creating Feature Routing Modules

Explore how to create and configure feature routing modules in Angular to better organize your app's routes. This lesson teaches you to separate route configurations for scalability, use RouterModule with forChild, and manage import order to optimize routing behavior. By mastering these, you improve code modularity and navigation control in your Angular applications.

We'll cover the following...

We set up the route configuration so that routing works the way it should. However, this approach doesn’t scale so well. As our application grows, more and more routes may be added to the routing module of the main application module. To overcome this problem, we should create a separate feature module for our components that will also have a dedicated routing module (we already created a products module). We will use it in our application so that any product-related functionality is contained inside that module:

Adding products and auth modules in our application

  1. Open the styles.css file of the current Angular project and add the following content to it:

NAME_
CSS
/* You can add global styles to this file, and also import other style files */
a {
  color: #1976d2;
  text-decoration: none;
  margin: 5px;
}
a:hover {
  opacity: 0.8;
}
* {
  font-family: 'Roboto', Arial, sans-serif;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
div  {
  padding: 0 16px;
}
h1 {
  font-size: 32px;
}
h2 {
  font-size: 20px;
}
p {
  font-size: 14px;
}
li {
  cursor: pointer;
}
.button, button {
  padding: 8px 16px;
  border-radius: 2px;
  font-size: 14px;
  cursor: pointer;
  border: none;
}
.button:hover, button:hover {
  opacity: 0.8;
  font-weight: normal;
}
input {
  font-size: 14px;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 16px;
  border: 1px solid #BDBDBD;
}
label {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 4px;
  display: block;
}
.active {
  color: black;
}

  1. Delete the src\app\products folder from the current Angular CLI project.

  2. Add the products and auth ...