Angular2: Export RouterModule, why is this required?

Question

I am learning Angular 2 app-routing from the official documentation. I am looking at the following code snippet.

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; export const routes: Routes = [ { path: '', redirectTo: 'contact', pathMatch: 'full'}, { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {} 

It creates an AppRoutingModule and defines routes for it. The part I cannot understand is Why do we need to export the RouterModule again? I believe this is one of the main angular modules and which is available worldwide by importing @angular/router .

Answer 1

You do not need to export it. It is just for convenience. If you add an AppRoutingModule to the AppModule , you also implicitly import the RouterModule in this way. Otherwise, you will need to import it explicitly

 @NgModule({ imports: [AppRoutingModule, RouterModule], }) export class AppModule {} 

for example, to use <router-outlet> or RouterLink in components declared in the AppModule

Answer 2

Do you need a routing module?

The routing module replaces the routing configuration in the root or function module. Either configure the routes in the routing module, or in the module itself, but not both.

The routing module is the choice of design, the meaning of which is most obvious when the configuration is complex and includes specialized protection and recognition services. This may seem redundant when the actual configuration is dead simple.

Some developers skip the routing module (for example, AppRoutingModule) when the configuration is simple, and merging the routing configuration directly into a companion module (for example, AppModule).

Select one template or another and follow this template in sequence.

Most developers should always implement a routing module for consistency. It keeps the code clean when the configuration becomes complicated. This makes it easy to test the function module. Its existence draws attention to the fact that the module is routed. It is the developers who expect to find and expand the routing configuration.

Answer 3

You can do it differently, as shown below, but the system above is a more readable and cleaner concept of code.

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { Routes, RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; const routes: Routes = [ { path: '', redirectTo: 'contact', pathMatch: 'full'}, { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' } ]; @NgModule({ declarations: [ AppComponent ], imports: [ RouterModule.forRoot(routes), BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }