Merge pull request #190 from ngx-rocket/bugfix/shell-single-instance

Added custom route reuse strategy

generators/app/templates/src/app/core/_core.module.ts

@@ -1,6 +1,6 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { RouteReuseStrategy, RouterModule } from '@angular/router';
 import { HttpModule, Http, XHRBackend, ConnectionBackend, RequestOptions } from '@angular/http';
 import { TranslateModule } from '@ngx-translate/core';
 <% if (props.ui === 'bootstrap') { -%>
@@ -18,6 +18,7 @@ import { ShellComponent } from './shell/shell.component';
 <% if (props.ui === 'bootstrap' || (props.ui === 'material' && props.layout === 'simple')) { -%>
 import { HeaderComponent } from './shell/header/header.component';
 <% } -%>
+import { RouteReusableStrategy } from './route-reusable-strategy';
 <% if (props.auth) { -%>
 import { AuthenticationService } from './authentication/authentication.service';
 import { AuthenticationGuard } from './authentication/authentication.guard';
@@ -69,6 +70,10 @@ export function createHttpService(backend: ConnectionBackend,
       provide: Http,
       deps: [XHRBackend, RequestOptions, HttpCacheService],
       useFactory: createHttpService
+    },
+    {
+      provide: RouteReuseStrategy,
+      useClass: RouteReusableStrategy
     }
   ]
 })

generators/app/templates/src/app/core/_route.service.ts

@@ -19,13 +19,13 @@ export class Route {
     return [{
       path: '',
       component: ShellComponent,
-<% if (props.auth) { -%>
       children: routes,
-      canActivate: [AuthenticationGuard]
-<% } else { -%>
-      children: routes
+<% if (props.auth) { -%>
+      canActivate: [AuthenticationGuard],
 <% } -%>
-    }];
+      // Reuse ShellComponent instance when navigating between child views
+      data: { reuse: true }
+}];
   }
 
 }

generators/app/templates/src/app/core/route-reusable-strategy.ts

@@ -0,0 +1,28 @@
+import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
+
+/**
+ * A route strategy allowing for explicit route reuse.
+ * Used as a workaround for https://github.com/angular/angular/issues/18374
+ * To reuse a given route, add `data: { reuse: true }` to the route definition.
+ */
+export class RouteReusableStrategy extends RouteReuseStrategy {
+
+  public shouldDetach(route: ActivatedRouteSnapshot): boolean {
+    return false;
+  }
+
+  public store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void { }
+
+  public shouldAttach(route: ActivatedRouteSnapshot): boolean {
+    return false;
+  }
+
+  public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
+    return null;
+  }
+
+  public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+    return (future.routeConfig === curr.routeConfig) || future.data.reuse;
+  }
+
+}

generators/app/templates/src/app/core/shell/__material._shell.component.html

@@ -39,11 +39,11 @@
       <nav>
         <mat-list>
           <mat-divider></mat-divider>
-          <a mat-list-item routerLink="/home" routerLinkActive="active">
+          <a mat-list-item routerLink="/home" routerLinkActive="active" (click)="sidenav.close()">
             <span translate>Home</span>
           </a>
           <mat-divider></mat-divider>
-          <a mat-list-item routerLink="/about" routerLinkActive="active">
+          <a mat-list-item routerLink="/about" routerLinkActive="active" (click)="sidenav.close()">
             <span translate>About</span>
           </a>
           <mat-divider></mat-divider>

generators/app/templates/src/app/home/home.component.ts

@@ -13,7 +13,7 @@ export class HomeComponent implements OnInit {
   quote: string;
   isLoading: boolean;
 
-  constructor(private quoteService: QuoteService) {}
+  constructor(private quoteService: QuoteService) { }
 
   ngOnInit() {
     this.isLoading = true;