JS: ERROR Error: Uncaught (in promise): Run init() first!


#1

this a chat page,when i navigate to it i receive the error above
Note:Firebase init works fine ,what am i missing

import {RouterExtensions } from "nativescript-angular/router";
import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
import { Observable } from 'rxjs';
import { BackendService, FirebaseService } from "~/services";
import { ListView } from 'tns-core-modules/ui/list-view/list-view';
import { TextField } from 'tns-core-modules/ui/text-field/text-field';
import { ScrollView } from 'tns-core-modules/ui/scroll-view/scroll-view';



@Component({
    selector: "chat-detail",
    moduleId: module.id,
    templateUrl: "chat.component.html",
    styleUrls: ["chat.component.css"]

})

export class ChatDetailComponent implements OnInit {
    public me: String;
    @ViewChild("list") lv: ElementRef;

    @ViewChild("textfield") tf: ElementRef;

    list: ListView;

    textfield: TextField;
    constructor(private _routerExtensions: RouterExtensions, private firebaseService: FirebaseService) {

        // Use the component constructor to inject providers.
}

 ngOnInit():void {

    this.me = BackendService.token;

    this.chats$ = <any>this.firebaseService.getChats();   

}

public goBack() {
    this._routerExtensions.backToPreviousPage();
}

public chats$: Observable<any>;

 ngAfterViewInit():void {

    
        this.list = this.lv.nativeElement;

    this.textfield = this.tf.nativeElement;


}



scroll(count:number){

   console.log("scrolling to ", count)

   this.list.scrollToIndex(count-1);

   this.list.refresh();

}



chat(message: string) {

    this.firebaseService.chat(message).then((data: any) => {

        let count = this.list.items.length;

        this.scroll(count);

    });

    this.textfield.text = '';        

}



filter(sender) {

    if (sender == BackendService.token) {

        return "me"

    }

    else {

        return "them"
    }

}



align(sender) {

    if (sender == BackendService.token) {

        return "right"

    }

    else {

        return "left"

    }

}

showImage(sender) {

    if (sender == BackendService.token) {

        return "collapsed"

    }

    else {

        return "visible"

    }
}
}


#2

What does getChats() return? Did you try commenting that?
May I also know what you may have in your HTML & FirebaseService?


#3

sure!
this is my HTML


        <ListView height="90%" margin-bottom="50" padding="5" #list [items]="chats$ | async">
    
            <ng-template let-item="item">
    
                <GridLayout columns="*" rows="auto" class="msg">
    
                    <StackLayout [class]="filter(item.from)" orientation="horizontal" [horizontalAlignment]="align(item.from)">
    
                        <Image [visibility]="showImage(item.from)" class="authorimg" stretch="aspectFill" height="30" width="30" verticalAlignment="top" src="~/images/k1.png" col="1"></Image>
    
                        <Label [text]='item.message' class="msg_text" textWrap="true" verticalAlignment="top"></Label>
    
                    </StackLayout>
    
                </GridLayout>
    
            </ng-template>
    
        </ListView>
    
    
    
        <StackLayout #chatbox height="10%">
    
            <GridLayout columns="*,auto" style="padding: 10">
    
                <TextField #textfield class="chatTextField" row="0" col="0" [(ngModel)]="message"></TextField>
    
                <Button #btn class="chatBtn" row="0" col="1" text="send" (tap)=chat(message)></Button>
    
            </GridLayout>
    
        </StackLayout>
    
    
    
    </StackLayout>

and here is FirebaseSrevices

import {Injectable, NgZone} from "@angular/core";

import {User, Yowl} from "~/models";

import { BackendService } from "~/services/backend.service";

import firebase = require("nativescript-plugin-firebase");

import {Observable} from 'rxjs/internal/Observable';

import {BehaviorSubject} from 'rxjs';

import 'rxjs/add/operator/share';



@Injectable()

export class FirebaseService {

  constructor(

    private ngZone: NgZone,

  ){}





yowls: BehaviorSubject<Array<Yowl>> = new BehaviorSubject([]);

private _allYowls: Array<Yowl> = [];

chats: BehaviorSubject<Array<Yowl>> = new BehaviorSubject([]);

private _allChats: Array<Yowl> = [];



  getMessage(){ 

    firebase.addOnMessageReceivedCallback(function (data ){

        alert(JSON.stringify(data));

    })

  }



  register(user: User) {

    return firebase.createUser({

      email: user.email,

      password: user.password

    }).then(

          function (result:any) {

            return JSON.stringify(result);

          },

          function (errorMessage:any) {

            alert(errorMessage);

          }

      )

  }



  login(user: User) {

    return firebase.login({

      type: firebase.LoginType.PASSWORD,

      passwordOptions: {

        email: user.email,

        password: user.password

      }

    }).then((result: any) => {

          BackendService.token = result.uid;

          return JSON.stringify(result);

      }, (errorMessage: any) => {

        alert(errorMessage);

      });

  }



  logout(){

    BackendService.token = "";

    firebase.logout();    

  }

  

  resetPassword(email) {

    return firebase.resetPassword({

    email: email

    }).then((result: any) => {

          alert(JSON.stringify(result));

        },

        function (errorMessage:any) {

          alert(errorMessage);

        }

    ).catch(this.handleErrors);

  }  



 getYowls(): Observable<any> {

    return new Observable((observer: any) => {

      let path = 'Yowls';

      

        let onValueEvent = (snapshot: any) => {

          this.ngZone.run(() => {

            let results = this.handleSnapshot(snapshot.value);

             observer.next(results);

          });

        };

        firebase.addValueEventListener(onValueEvent, `/${path}`);

    })              

  }



  handleSnapshot(data: any) {

    //empty array, then refill and filter

    this._allYowls = [];

    if (data) {

      for (let id in data) {        

        let result = (<any>Object).assign({id: id}, data[id]);

          this._allYowls.push(result);

      }

      this.publishUpdates();

    }

    return this._allYowls;

  }



  getChats(): Observable<any> {

    return new Observable((observer: any) => {

      let path = 'Chats';

      

        let onValueEvent = (snapshot: any) => {

          this.ngZone.run(() => {

            let results = this.handleChatSnapshot(snapshot.value);

             observer.next(results);

          });

        };

        firebase.addValueEventListener(onValueEvent, `/${path}`);

    })             

  }



  handleChatSnapshot(data: any) {

    //empty array, then refill and filter

    this._allChats = [];

    if (data) {

      for (let id in data) {        

        let result = (<any>Object).assign({id: id}, data[id]);

          this._allChats.push(result);

      }

      this.publishChatUpdates();

    }

    return this._allChats;

  }



  sendYowl(Yowl:any) {

    let yowl = Yowl;   

    return firebase.push(

        "/Yowls",

        { "name": "Mr. Growlllr", "username": "MrGrwwlr", "text": "Yooowwwwlll!", "UID": BackendService.token, "date": 0 - Date.now()}

      ).then(

        function (result:any) {

          return 'Yowwled!';

        },

        function (errorMessage:any) {

          console.log(errorMessage);

        }); 

  }



  chat(message:string) {

    //let chat = Chat; 

    console.log(message)  

    return firebase.push(

        "/Chats",

        { "message": message, "to": "MrGrwwlr", "from": BackendService.token, "date": 0 - Date.now()}

      ).then(

        function (result:any) {

          return "chatted";

        },

        function (errorMessage:any) {

          console.log(errorMessage);

        }); 

  }



   publishUpdates() {

    this._allYowls.sort(function(a, b){

        if(a.date < b.date) return -1;

        if(a.date > b.date) return 1;

      return 0;

    })

    this.yowls.next([...this._allYowls]);

  }



  publishChatUpdates() {

    this._allChats.sort(function(a, b){

        if(a.date > b.date) return -1;

        if(a.date < b.date) return 1;

      return 0;

    })

    this.chats.next([...this._allChats]);

  }



  handleErrors(error) {

    console.log(JSON.stringify(error));

    return Promise.reject(error.message);

  }

}

#4

You need to init the firebase plugin before calling any of its other functions. Read this section in the plugin’s documentation that explains how to initialize it.


#5

i already init Firebase in my app.commponent and was still seeing the same error then i init it in Main.ts and again still same thing