Switched firebase modules

package.json

@@ -17,6 +17,7 @@
         "@angular/common": "~7.0.0",
         "@angular/compiler": "~7.0.0",
         "@angular/core": "~7.0.0",
+        "@angular/fire": "^5.2.1",
         "@angular/forms": "~7.0.0",
         "@angular/http": "~7.0.0",
         "@angular/material": "^7.0.4",

src/app/app.component.ts

@@ -6,7 +6,7 @@ import {collapseUp, expandDown, routerTransition} from './animations';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 import {filter} from 'rxjs/operators';
 import {WeatherService} from './weather/weather.service';
-import {firebaseApp} from './app.module';
+import {AngularFireAuth} from '@angular/fire/auth';
 
 @Component({
     selector: 'app-root',
@@ -20,7 +20,7 @@ export class AppComponent {
     open = false; // Side nav open
     environment = environment; // Environment ref
 
-    constructor(private router: Router, public batteryService: BatteryService, public weatherService: WeatherService, route: ActivatedRoute, breakpointObserver: BreakpointObserver) {
+    constructor(private auth: AngularFireAuth, private router: Router, public batteryService: BatteryService, public weatherService: WeatherService, route: ActivatedRoute, breakpointObserver: BreakpointObserver) {
         router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
             this.hide = !!route.root.firstChild.snapshot.data.hide;
             this.open = !this.hide && !this.mobile;
@@ -34,7 +34,7 @@ export class AppComponent {
 
     async logout() {
         this.noTransition = true;
-        await firebaseApp.auth().signOut();
+        await this.auth.auth.signOut();
         return this.router.navigate(['/login']).then(() => this.noTransition = false);
     }
 

src/app/app.module.ts

@@ -20,15 +20,15 @@ import {WeatherComponent} from './weather/weather.component';
 import {SecurityComponent} from './security/security.component';
 import {HttpClientModule} from '@angular/common/http';
 import {LoginComponent} from './login/login.component';
-import {environment} from '../environments/environment';
-import * as firebase from 'firebase/app';
 import {ServiceWorkerModule} from '@angular/service-worker';
 import {LineChartModule, NgxChartsModule} from '@swimlane/ngx-charts';
 import {RoundPipe} from './round.pipe';
 import {BatteryWidgetComponent} from './battery/widget/batteryWidget.component';
 import {WeatherWidgetComponent} from './weather/widget/weatherWidget.component';
-
-export const firebaseApp = firebase.initializeApp(environment.firebase);
+import {AngularFireAuthModule} from '@angular/fire/auth';
+import {environment} from '../environments/environment';
+import {AngularFireModule} from '@angular/fire';
+import {AngularFirestoreModule} from '@angular/fire/firestore';
 
 @NgModule({
     declarations: [
@@ -43,6 +43,9 @@ export const firebaseApp = firebase.initializeApp(environment.firebase);
         WeatherWidgetComponent
     ],
     imports: [
+        AngularFireAuthModule,
+        AngularFireModule.initializeApp(environment.firebase),
+        AngularFirestoreModule.enablePersistence(),
         AppRoutingModule,
         BrowserModule,
         BrowserAnimationsModule,

src/app/battery/battery.service.ts

@@ -1,12 +1,10 @@
 import {Injectable} from '@angular/core';
-import {firebaseApp} from '../app.module';
+import {AngularFirestore} from '@angular/fire/firestore';
 
 @Injectable({
     providedIn: 'root'
 })
 export class BatteryService {
-    readonly firestore;
-
     batteries = [];
     charge: number;
     lastCharge: number;
@@ -43,12 +41,10 @@ export class BatteryService {
         return temp;*/
     }
 
-    constructor() {
-        this.firestore = firebaseApp.firestore();
-        this.firestore.settings({timestampsInSnapshots: true});
-        this.firestore.collection('Battery').doc('170614D').onSnapshot(snap => {
+    constructor(private firestore: AngularFirestore) {
+        this.firestore.collection('Battery').doc('170614D').snapshotChanges().subscribe(snap => {
             this.lastUpdate = new Date().getTime();
-            let data = snap.data();
+            let data: any = snap.payload.data();
             this.relayMode = data.config.relayMode ? data.config.relayMode.toString() : 'null';
             this.batteries = Object.keys(data.modules).map(key => {
                 let last = data.modules[key].length - 1;

src/app/login/login.component.ts

@@ -1,8 +1,8 @@
 import {Component, NgZone, OnInit} from '@angular/core';
-import {firebaseApp} from '../app.module';
 import {Router} from '@angular/router';
 import * as firebase from 'firebase';
 import {expandDown, fadeIn, fadeOut} from '../animations';
+import {AngularFireAuth} from '@angular/fire/auth';
 
 @Component({
     selector: 'app-login',
@@ -14,10 +14,10 @@ export class LoginComponent implements OnInit {
     show = true;
     loading = false;
 
-    constructor(private ngZone: NgZone, public router: Router) { }
+    constructor(private auth: AngularFireAuth, private ngZone: NgZone, public router: Router) { }
 
     ngOnInit() {
-        firebaseApp.auth().onAuthStateChanged(user => {
+        this.auth.auth.onAuthStateChanged(user => {
             if(!!user) {
                 this.show = false;
                 setTimeout(() => {
@@ -31,8 +31,7 @@ export class LoginComponent implements OnInit {
 
     async login() {
         this.loading = true;
-        await firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL);
-        await firebaseApp.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider());
+        await this.auth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
         this.loading = false;
     }
 }

src/app/login/login.guard.ts

@@ -1,8 +1,8 @@
 import {CanActivate, Router} from '@angular/router';
-import {firebaseApp} from '../app.module';
 import {Injectable} from '@angular/core';
 import {Observable, timer} from 'rxjs';
 import {filter, map} from 'rxjs/operators';
+import {AngularFireAuth} from '@angular/fire/auth';
 
 @Injectable({
     providedIn: 'root'
@@ -10,8 +10,8 @@ import {filter, map} from 'rxjs/operators';
 export class LoginGuard implements CanActivate {
     loggedIn?;
 
-    constructor(private router: Router) {
-        firebaseApp.auth().onAuthStateChanged(user => this.loggedIn = !!user);
+    constructor(private auth: AngularFireAuth, private router: Router) {
+        this.auth.auth.onAuthStateChanged(user => this.loggedIn = !!user);
     }
 
     canActivate(): Observable<boolean> {

yarn.lock

@@ -171,6 +171,11 @@
   dependencies:
     tslib "^1.9.0"
 
+"@angular/fire@^5.2.1":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@angular/fire/-/fire-5.2.1.tgz#4b966aaed10cda0b430c9d80769b39d08032004d"
+  integrity sha512-pS4zWhLLANzMbYVIKNtebDQKhm9+KANUDvDV6DwKP24XHzkZdvazKe1HC6uXWlf7QmDxSPFleCSBkn0tnQQzdQ==
+
 "@angular/forms@~7.0.0":
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-7.0.3.tgz#6cbc2b760756b759b1623dd3d541252ae2acb6f7"