Upgrade to Angular 7

Author: jhades

package.json

@@ -13,39 +13,39 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "6.0.0",
-    "@angular/common": "6.0.0",
-    "@angular/compiler": "6.0.0",
-    "@angular/core": "6.0.0",
-    "@angular/forms": "6.0.0",
-    "@angular/http": "6.0.0",
-    "@angular/platform-browser": "6.0.0",
-    "@angular/platform-browser-dynamic": "6.0.0",
-    "@angular/router": "6.0.0",
+    "@angular/animations": "7.0.0",
+    "@angular/common": "7.0.0",
+    "@angular/compiler": "7.0.0",
+    "@angular/core": "7.0.0",
+    "@angular/forms": "7.0.0",
+    "@angular/http": "7.0.0",
+    "@angular/platform-browser": "7.0.0",
+    "@angular/platform-browser-dynamic": "7.0.0",
+    "@angular/router": "7.0.0",
     "@types/express": "^4.0.35",
     "@types/lodash": "^4.14.52",
-    "angularfire2": "^4.0.0-rc.0",
+    "@angular/fire": "^5.1.0",
     "body-parser": "^1.17.1",
     "cookies-js": "^1.2.3",
     "core-js": "^2.4.1",
     "express": "^4.15.2",
-    "firebase": "^3.7.4",
+    "firebase": "^5.5.5",
     "lodash": "^4.17.4",
     "promise-polyfill": "^6.0.2",
-    "rxjs": "6.1.0",
+    "rxjs": "6.3.3",
     "rxjs-compat": "^6.0.0-rc.0",
     "ts-helpers": "^1.1.1",
     "zone.js": "0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.6.0",
-    "@angular/cli": "^6.0.0",
-    "@angular/compiler-cli": "6.0.0",
-    "@angular/language-service": "6.0.0",
+    "@angular-devkit/build-angular": "~0.10.0",
+    "@angular/cli": "^7.0.0",
+    "@angular/compiler-cli": "7.0.0",
+    "@angular/language-service": "7.0.0",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
-    "codelyzer": "~3.2.0",
+    "codelyzer": "~4.2.0",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
@@ -57,6 +57,6 @@
     "protractor": "~5.1.2",
     "ts-node": "~3.2.0",
     "tslint": "~5.7.0",
-    "typescript": "~2.7.2"
+    "typescript": "~3.1.3"
   }
-}
+}

src/app/app.module.ts

@@ -8,7 +8,7 @@ import {EventBusExperimentsComponent} from './event-bus-experiments/event-bus-ex
 import {LessonsListComponent} from './lessons-list/lessons-list.component';
 import {LessonsCounterComponent} from './lessons-counter/lessons-counter.component';
 import {HomeComponent} from './home/home.component';
-import {AngularFireModule} from 'angularfire2';
+import {AngularFireModule} from '@angular/fire';
 import {RouterModule} from '@angular/router';
 import {routerConfig} from "./router.config";
 import {CourseDetailComponent} from './course-detail/course-detail.component';
@@ -31,7 +31,7 @@ import { CreateLessonComponent } from './create-lesson/create-lesson.component';
 import {CourseDetailResolver} from "./course-detail/course-detail.resolver";
 import { LoadingComponent } from './loading/loading.component';
 import {firebaseConfig} from "../environments/firebase.config";
-import {AngularFireDatabaseModule} from "angularfire2/database";
+import {AngularFireDatabaseModule} from "@angular/fire/database";
 
 
 @NgModule({

src/app/services/courses.service.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
-import {AngularFireDatabase} from "angularfire2/database";
+import {AngularFireDatabase} from "@angular/fire/database";
 import {Observable} from "rxjs/Observable";
 import {Course} from "../shared/model/course";
 import {Lesson} from "../shared/model/lesson";
+import {first, map} from 'rxjs/operators';
 
 @Injectable()
 export class CoursesService {
@@ -13,40 +14,40 @@ export class CoursesService {
 
   findAllCourses(): Observable<Course[]> {
       return this.db.list('courses')
+          .valueChanges()
           .first()
           .do(console.log);
   }
 
+
   findLatestLessons(): Observable<Lesson[]> {
-      return this.db.list('lessons', {
-          query: {
-              orderByKey: true,
-              limitToLast: 10
-          }
-      })
+    return this.db.list('lessons', ref => ref.orderByKey().limitToLast(10))
+      .valueChanges()
       .first()
       .do(console.log);
   }
 
   findCourseByUrl(courseUrl:string): Observable<Course> {
-      return this.db.list('courses', {
-          query: {
-              orderByChild: 'url',
-              equalTo: courseUrl
-          }
-      })
-      .map( data => data[0])
-      .first();
+      return this.db.list('courses', ref => ref.orderByChild('url').equalTo(courseUrl))
+      .snapshotChanges()
+      .pipe(
+        map( changes => {
+
+          const snap = changes[0];
+
+          return <Course> {
+            id:snap.payload.key,
+            ...snap.payload.val()
+          };
 
+        }),
+        first()
+      )
   }
 
   findLessonsForCourse(courseId:string): Observable<Lesson[]> {
-      return <any>this.db.list('lessons', {
-          query: {
-              orderByChild: 'courseId',
-              equalTo: courseId
-          }
-      })
+      return <any>this.db.list('lessons', ref => ref.orderByChild('courseId').equalTo(courseId))
+      .valueChanges()
       .first();
   }
 

src/polyfills.ts

@@ -42,7 +42,7 @@
 
 /** Evergreen browsers require these. **/
 import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
+
 
 
 /** ALL Firefox browsers require the following to support `@angular/animation`. **/