Angular Universal Course

Author: Your Name

src/app/app.module.ts

@@ -45,6 +45,7 @@ import {AppShellRenderDirective} from './directives/app-shell-render.directive';
     ],
     imports: [
         BrowserModule.withServerTransition({ appId: 'serverApp' }),
+        BrowserTransferStateModule,
         BrowserAnimationsModule,
         MatMenuModule,
         MatButtonModule,

src/app/app.server.module.ts

@@ -1,14 +1,17 @@
-import { NgModule } from '@angular/core';
-import { ServerModule } from '@angular/platform-server';
+import {NgModule} from '@angular/core';
+import {ServerModule, ServerTransferStateModule} from '@angular/platform-server';
 
-import { AppModule } from './app.module';
-import { AppComponent } from './app.component';
+import {AppModule} from './app.module';
+import {AppComponent} from './app.component';
 
 @NgModule({
-  imports: [
-    AppModule,
-    ServerModule,
-  ],
-  bootstrap: [AppComponent],
+    imports: [
+        AppModule,
+        ServerModule,
+        ServerTransferStateModule
+    ],
+    bootstrap: [AppComponent],
 })
-export class AppServerModule {}
+export class AppServerModule {
+
+}

src/app/services/course.resolver.ts

@@ -6,23 +6,48 @@ import {CoursesService} from './courses.service';
 import {first, tap} from 'rxjs/operators';
 import {of} from 'rxjs/observable/of';
 import {isPlatformServer} from '@angular/common';
+import {makeStateKey, TransferState} from '@angular/platform-browser';
 
 
 @Injectable()
 export class CourseResolver implements Resolve<Course> {
 
-    constructor(private coursesService: CoursesService) {
+    constructor(
+        private coursesService: CoursesService,
+        @Inject(PLATFORM_ID) private platformId,
+        private transferState:TransferState
+    ) {
 
     }
 
     resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course> {
 
         const courseId = route.params['id'];
 
-        return this.coursesService.findCourseById(courseId)
-            .pipe(
-                first()
-            );
+        const COURSE_KEY = makeStateKey<Course>('course-' + courseId);
+
+        if (this.transferState.hasKey(COURSE_KEY)) {
+
+            const course = this.transferState.get<Course>(COURSE_KEY, null);
+
+            this.transferState.remove(COURSE_KEY);
+
+            return of(course);
+        }
+        else {
+            return this.coursesService.findCourseById(courseId)
+                .pipe(
+                    first(),
+                    tap(course => {
+
+                        if (isPlatformServer(this.platformId)) {
+                            this.transferState.set(COURSE_KEY, course);
+                        }
+
+                    })
+                );
+
+        }
 
 
     }