refactor(example): refactor routes as routing modules (#1139)

example-app/app/routes.ts → example-app/app/app-routing.module.ts

@@ -1,4 +1,5 @@
-import { Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
 import { AuthGuard } from './auth/services/auth-guard.service';
 import { NotFoundPageComponent } from './core/containers/not-found-page.component';
 
@@ -11,3 +12,9 @@ export const routes: Routes = [
   },
   { path: '**', component: NotFoundPageComponent },
 ];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

example-app/app/app.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule } from '@angular/router';
 
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
@@ -17,21 +16,22 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { CoreModule } from './core/core.module';
 import { AuthModule } from './auth/auth.module';
 
-import { routes } from './routes';
 import { reducers, metaReducers } from './reducers';
 import { schema } from './db';
 import { CustomRouterStateSerializer } from './shared/utils';
 
 import { AppComponent } from './core/containers/app.component';
 import { environment } from '../environments/environment';
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
     BrowserModule,
     BrowserAnimationsModule,
     HttpClientModule,
-    RouterModule.forRoot(routes, { useHash: true }),
+    AuthModule.forRoot(),
+    AppRoutingModule,
 
     /**
      * StoreModule.forRoot is imported once in the root module, accepting a reducer
@@ -84,8 +84,6 @@ import { environment } from '../environments/environment';
     DBModule.provideDB(schema),
 
     CoreModule.forRoot(),
-
-    AuthModule.forRoot(),
   ],
   providers: [
     /**

example-app/app/auth/auth-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { LoginPageComponent } from './containers/login-page.component';
+
+const routes: Routes = [{ path: 'login', component: LoginPageComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AuthRoutingModule {}

example-app/app/auth/auth.module.ts

@@ -1,6 +1,5 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
 import { ReactiveFormsModule } from '@angular/forms';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
@@ -12,6 +11,7 @@ import { AuthGuard } from './services/auth-guard.service';
 import { AuthEffects } from './effects/auth.effects';
 import { reducers } from './reducers';
 import { MaterialModule } from '../material';
+import { AuthRoutingModule } from './auth-routing.module';
 
 export const COMPONENTS = [LoginPageComponent, LoginFormComponent];
 
@@ -32,7 +32,7 @@ export class AuthModule {
 @NgModule({
   imports: [
     AuthModule,
-    RouterModule.forChild([{ path: 'login', component: LoginPageComponent }]),
+    AuthRoutingModule,
     StoreModule.forFeature('auth', reducers),
     EffectsModule.forFeature([AuthEffects]),
   ],

example-app/app/books/books-routing.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { FindBookPageComponent } from './containers/find-book-page.component';
+import { ViewBookPageComponent } from './containers/view-book-page.component';
+import { CollectionPageComponent } from './containers/collection-page.component';
+import { BookExistsGuard } from './guards/book-exists.guard';
+
+export const routes: Routes = [
+  { path: 'find', component: FindBookPageComponent },
+  {
+    path: ':id',
+    component: ViewBookPageComponent,
+    canActivate: [BookExistsGuard],
+  },
+  { path: '', component: CollectionPageComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class BooksRoutingModule {}

example-app/app/books/books.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 
@@ -16,21 +15,14 @@ import { CollectionPageComponent } from './containers/collection-page.component'
 import { MaterialModule } from '../material';
 
 import { reducers } from './reducers';
+import { BooksRoutingModule } from './books-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
     MaterialModule,
     ComponentsModule,
-    RouterModule.forChild([
-      { path: 'find', component: FindBookPageComponent },
-      {
-        path: ':id',
-        component: ViewBookPageComponent,
-        canActivate: [BookExistsGuard],
-      },
-      { path: '', component: CollectionPageComponent },
-    ]),
+    BooksRoutingModule,
 
     /**
      * StoreModule.forFeature is used for composing state