Best practice to init firebase #613

Author: EddyVerbruggen

demo-ng/app/app.component.ts

@@ -1,8 +1,19 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+const firebase = require("nativescript-plugin-firebase/app");
 
 @Component({
-    selector: "ns-app",
-    templateUrl: "app.component.html",
+  selector: "ns-app",
+  templateUrl: "app.component.html",
 })
 
-export class AppComponent { }
+export class AppComponent implements OnInit {
+
+  ngOnInit(): void {
+    firebase.initializeApp({
+      persist: false
+    }).then(() => {
+      console.log("Firebase initialized");
+    });
+  }
+
+}

demo-ng/app/item/items.component.html

@@ -25,11 +25,11 @@
     <Label [text]="(myCity$ | async).name" height="32" *ngIf="myCity$"></Label>
     <Button text="Collection Observable (cities)" (tap)="firestoreCollectionObservable()" class="button"></Button>
     <ListView [items]="myCities$ | async" height="200" *ngIf="myCities$">
-      <template let-item="item">
+      <ng-template let-item="item">
         <StackLayout>
           <Label style="color: red" [text]='item.name'></Label>
         </StackLayout>
-      </template>
+      </ng-template>
     </ListView>
     <Button text="Listen to changes in SF" (tap)="firestoreListen()" class="button"></Button>
     <Button text="Stop listening" (tap)="firestoreStopListening()" class="button"></Button>

demo-ng/app/item/items.component.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone, OnInit } from "@angular/core";
+import { Component, NgZone } from "@angular/core";
 import { firestore } from "nativescript-plugin-firebase";
 import { Observable } from "rxjs/Observable";
 import { City } from "../model/City";
@@ -13,7 +13,7 @@ const firebaseWebApi = require("nativescript-plugin-firebase/app");
   moduleId: module.id,
   templateUrl: "./items.component.html",
 })
-export class ItemsComponent implements OnInit {
+export class ItemsComponent {
 
   private listenerUnsubscribe: () => void;
 
@@ -26,14 +26,6 @@ export class ItemsComponent implements OnInit {
     // AngularFireModule.initializeApp({});
   }
 
-  ngOnInit(): void {
-    firebase.initializeApp({
-      persist: false
-    }).then(() => {
-      console.log("Firebase initialized");
-    });
-  }
-
   public loginAnonymously(): void {
     firebase.auth().signInAnonymously()
         .then(() => console.log("Logged in"))

demo-ng/package.json

@@ -6,37 +6,39 @@
   "nativescript": {
     "id": "org.nativescript.firebasedemo.firestore",
     "tns-ios": {
-      "version": "3.4.0"
+      "version": "3.4.1"
     },
     "tns-android": {
-      "version": "3.4.0"
+      "version": "3.4.1"
     }
   },
   "dependencies": {
-    "@angular/animations": "~4.4.1",
-    "@angular/common": "~4.4.1",
-    "@angular/compiler": "~4.4.1",
-    "@angular/core": "~4.4.1",
-    "@angular/forms": "~4.4.1",
-    "@angular/http": "~4.4.1",
-    "@angular/platform-browser": "~4.4.1",
-    "@angular/router": "~4.4.1",
+    "@angular/animations": "~5.2.0",
+    "@angular/common": "~5.2.0",
+    "@angular/compiler": "~5.2.0",
+    "@angular/core": "~5.2.0",
+    "@angular/forms": "~5.2.0",
+    "@angular/http": "~5.2.0",
+    "@angular/platform-browser": "~5.2.0",
+    "@angular/platform-browser-dynamic": "~5.2.0",
+    "@angular/router": "~5.2.0",
     "angularfire2": "^5.0.0-rc.4",
     "firebase": "^4.6.2",
-    "nativescript-angular": "~4.4.0",
+    "nativescript-angular": "~5.2.0",
     "nativescript-plugin-firebase": "5.1.3",
-    "nativescript-theme-core": "~1.0.2",
-    "reflect-metadata": "~0.1.8",
-    "rxjs": "~5.4.2",
-    "tns-core-modules": "~3.3.0",
-    "zone.js": "~0.8.2"
+    "nativescript-theme-core": "~1.0.4",
+    "reflect-metadata": "~0.1.10",
+    "rxjs": "~5.5.0",
+    "tns-core-modules": "~3.4.0",
+    "zone.js": "~0.8.18"
   },
   "devDependencies": {
+    "@angular/compiler-cli": "~5.2.0",
     "babel-traverse": "6.26.0",
     "babel-types": "6.26.0",
     "babylon": "6.18.0",
     "lazy": "1.0.11",
-    "nativescript-dev-typescript": "~0.5.0",
-    "typescript": "~2.4.2"
+    "nativescript-dev-typescript": "~0.6.0",
+    "typescript": "~2.6.2"
   }
 }