Guarding the routes

src/app/app.module.ts

@@ -6,19 +6,29 @@ import { StoreComponent } from './store/store.component';
 import { CheckoutComponent } from './store/checkout.component';
 import { CartDetailComponent } from './store/cartDetail.component';
 import { RouterModule } from '@angular/router';
+import { StoreFirstGuard } from './storeFirst.guard';
 
 @NgModule({
   imports: [BrowserModule, StoreModule,
     RouterModule.forRoot([
-      { path: "store", component: StoreComponent },
-      { path: "cart", component: CartDetailComponent },
-      { path: "checkout", component: CheckoutComponent },
+      { 
+        path: "store", component: StoreComponent,
+        canActivate: [StoreFirstGuard]
+      },
+      { 
+        path: "cart", component: CartDetailComponent,
+        canActivate: [StoreFirstGuard]
+      },
+      { 
+        path: "checkout", component: CheckoutComponent,
+        canActivate: [StoreFirstGuard]
+      },
       { path: "**", redirectTo: "/store" }
     ])],
+  providers: [StoreFirstGuard],
   declarations: [
     AppComponent
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/storeFirst.guard.ts

@@ -0,0 +1,22 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
+import { StoreComponent } from "./store/store.component";
+
+@Injectable()
+export class StoreFirstGuard {
+    private firstNavigation = true;
+
+    constructor(private router: Router) {}
+
+    canActivate(route: ActivatedRouteSnapshot,
+        state: RouterStateSnapshot): boolean {
+            if (this.firstNavigation) {
+                this.firstNavigation = false;
+                if (route.component != StoreComponent) {
+                    this.router.navigateByUrl("/");
+                    return false;
+                }
+            }
+            return true;
+    }
+}