Angular Universal In Depth

Author: Your Name

src/app/app.module.ts

@@ -49,6 +49,7 @@ import {AppShellNoRenderDirective} from "./directives/app-shell-norender.directi
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    BrowserTransferStateModule,
     BrowserAnimationsModule,
     MatMenuModule,
     MatButtonModule,

src/app/app.server.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { ServerModule } from '@angular/platform-server';
+import {ServerModule, ServerTransferStateModule} from '@angular/platform-server';
 
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
@@ -8,6 +8,7 @@ import { AppComponent } from './app.component';
   imports: [
     AppModule,
     ServerModule,
+    ServerTransferStateModule
   ],
   bootstrap: [AppComponent],
 })

src/app/course/course.component.ts

@@ -18,7 +18,6 @@ import {Meta, Title} from '@angular/platform-browser';
 })
 export class CourseComponent implements OnInit {
 
-
     course:Course;
 
     dataSource: MatTableDataSource<Lesson>;
@@ -30,11 +29,7 @@ export class CourseComponent implements OnInit {
         private route: ActivatedRoute,
         private coursesService: CoursesService,
         private title: Title,
-        private meta: Meta) {
-
-    }
-
-
+        private meta: Meta) {}
 
     ngOnInit() {
 

src/app/services/course.resolver.ts

@@ -5,25 +5,45 @@ import {Observable, of} from 'rxjs';
 import {CoursesService} from './courses.service';
 import {first, tap} from 'rxjs/operators';
 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,
+        private transferState:TransferState,
+        @Inject(PLATFORM_ID) private platformId) {
 
     }
 
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course> {
+    resolve(route: ActivatedRouteSnapshot,
+            state: RouterStateSnapshot): Observable<Course> {
 
         const courseId = route.params['id'];
 
-        return this.coursesService.findCourseById(courseId)
-            .pipe(
-                first()
-            );
+        const COURSE_KEY = makeStateKey<Course>("courseKey-" + courseId);
 
+        if (this.transferState.hasKey(COURSE_KEY)) {
 
+            const course = this.transferState.get(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);
+                        }
+                    })
+                );
+        }
     }
 
-}
+}