RxJs and Reactive Patterns Angular Architecture Course ongoing

Author: Your Name

src/app/app.module.ts

@@ -29,6 +29,7 @@ import {SafeUrlPipe} from "./shared/pipes/safe-url.pipe";
 import { MessagesComponent } from './messages/messages.component';
 import {MessagesService} from "./services/messages.service";
 import { CreateLessonComponent } from './create-lesson/create-lesson.component';
+import {CourseDetailResolver} from "./course-detail/course-detail.resolver";
 
 
 @NgModule({
@@ -65,7 +66,8 @@ import { CreateLessonComponent } from './create-lesson/create-lesson.component';
         NewsletterService,
         UserService,
         CoursesHttpService,
-        MessagesService
+        MessagesService,
+        CourseDetailResolver
     ],
     bootstrap: [AppComponent]
 })

src/app/course-detail/course-detail.component.ts

@@ -2,8 +2,6 @@ import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {Course} from "../shared/model/course";
 import {Lesson} from "../shared/model/lesson";
-import {CoursesService} from "../services/courses.service";
-import {UserService} from "../services/user.service";
 import {Observable} from "rxjs";
 
 
@@ -17,25 +15,25 @@ export class CourseDetailComponent implements OnInit {
     course$: Observable<Course>;
     lessons$: Observable<Lesson[]>;
 
-    constructor(private route: ActivatedRoute,
-                private coursesService: CoursesService,
-                private userService: UserService) {
+    constructor(private route: ActivatedRoute) {
 
     }
 
     ngOnInit() {
 
-        this.course$ = this.route.params
-            .switchMap(params => this.coursesService.findCourseByUrl(params['id']))
-            .first()
-            .publishLast().refCount();
+        this.course$ = this.route.data.map(data => data['detail'][0]);
 
-        this.lessons$ = this.course$
-            .switchMap(course => this.coursesService.findLessonsForCourse(course.id))
-            .first()
-            .publishLast().refCount();
+        this.lessons$ = this.route.data.map(data => data['detail'][1]);
 
     }
 
 
 }
+
+
+
+
+
+
+
+

src/app/course-detail/course-detail.resolver.ts

@@ -0,0 +1,30 @@
+
+
+import {Resolve, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";
+import {Course} from "../shared/model/course";
+import {Lesson} from "../shared/model/lesson";
+import {Observable} from "rxjs";
+import {Injectable} from "@angular/core";
+import {CoursesService} from "../services/courses.service";
+
+
+@Injectable()
+export class CourseDetailResolver implements Resolve<[Course,(Lesson[])]> {
+
+    constructor(private coursesService: CoursesService) {
+
+    }
+
+
+    resolve(
+        route: ActivatedRouteSnapshot,
+        state: RouterStateSnapshot): Observable<[Course, (Lesson[])]> {
+
+        return this.coursesService.findCourseByUrl(route.params['id'])
+            .switchMap(course => this.coursesService.findLessonsForCourse(course.id),
+                (course, lessons) => [course, lessons] );
+
+
+    }
+
+}

src/app/router.config.ts

@@ -4,6 +4,7 @@ import {CourseDetailComponent} from "./course-detail/course-detail.component";
 import {LoginComponent} from "./login/login.component";
 import {AllLessonsComponent} from "./all-lessons/all-lessons.component";
 import {CreateLessonComponent} from "./create-lesson/create-lesson.component";
+import {CourseDetailResolver} from "./course-detail/course-detail.resolver";
 
 export const routerConfig: Routes = [
     {
@@ -20,7 +21,10 @@ export const routerConfig: Routes = [
     },
     {
         path: 'course/:id',
-        component: CourseDetailComponent
+        component: CourseDetailComponent,
+        resolve: {
+            detail: CourseDetailResolver
+        }
     },
     {
         path: 'lesson/new',