Defining a home page in your Angular routes

Often, we will want our web application to have a specific home page for our application. We will simply define a home page route in our Angular route configuration.

How to do it...

We can define a home page with our RouterModule configuration that will be served when the user loads the top level of our application, as follows:

1. First, we will generate a new component for controlling our home page. We will create this component using the Angular-CLI generate command:
   

ng generate component home

2. Next, we'll simply add our HomeComponent to our /src/app/app.module.ts route configuration:

...
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    AuthorsComponent,
    PageNotFoundComponent,
    AuthorComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot({
      path: "",
      component: HomeComponent
    },{
      path: "posts",
      component: PostsComponent
    },{
      path: "authors",
      component: AuthorsComponent
    }),
    PostsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Now when we visit http://localhost:4200 in your local browser, you will see the text home works! displayed.

How it works...

By setting the path to an empty string, we will define it as the index route for our router. We can then provide it any component we want to present to the user, but what if we wanted to use a route you have already defined in your application as your home page? For example, in our blog application, we will want to serve the posts component as the home page of our application. This configuration is possible through the use of the redirectTo property in the route configuration:

RouterModule.forRoot([
    {
      path: "",
      component: PostsComponent
    },
    {
      path: "posts",
      redirectTo: ""
    }
    ...
])

With the preceding configuration, the PostsComponent will be served for all visitors on the home page of our application, and anyone who navigates to /posts will be redirected to our home page. We can also create a link to our home page in the same manner as linking to any other route of our application:

<a routerLink="">Home</a>

There's more...

When working with multiple modules in your Angular application, you may want to route to a specific module from the home page of your application. To accomplish this, you just need to provide a redirectTo route as a string that is registered with your module's route configuration, and the flag pathMatch: 'full':

{
  path: "",
  redirectTo: "/posts",
  pathMatch: 'full'
},

This flag tells Angular how much of the path has to match before triggering the redirect. In this case, we want it when the path is completely empty to redirect to the /posts route.