CODEWITHSUNDEEP
angulartypescriptionic-frameworkfirebase-realtime-database
khaled djellal
khaled djellal

Reputation: 99

Ionic, firebase __WEBPACK_IMPORTED_MODULE_4_firebase_app__.database is not a function

Good evening, i wrote the error in the title so it makes it easy to know what's the probleme so i'm new the the ionic and firebase world i'm trying to do a chat app a simple one which consist on a sign in page where the user puts his nickname and after that he will be sent to a room page where he can join any room to start a chat it works fine i was able to make some people chating and creating rooms, and then i decided to make it a bit better by adding a authentication system with a sign up and signin pages using always firebase the part of signup and signin works fine and after the user logs in the app sends hi to the page where he can put his nickname the probleme is when he does that and press the button i get this error and it drives me crazy

WEBPACK_IMPORTED_MODULE_4_firebase_app.database is not a function

and here is the code behind this

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AddRoomPage } from '../add-room/add-room';
import { HomePage } from '../home/home';
import * as firebase from 'firebase/app';
import { TranslateService } from '@ngx-translate/core';

/**
 * Generated class for the RoomPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-room',
  templateUrl: 'room.html',
})
export class RoomPage {


	rooms =[];
	ref = firebase.database().ref('chatrooms/');
	
  constructor(public navCtrl: NavController, public navParams: NavParams, translate: TranslateService) {
    translate.setDefaultLang(window.navigator.language);
    //translate.setDefaultLang('fr');
  	this.ref.on('value', resp =>{
  		this.rooms = [];
  		this.rooms = snapshotToArray(resp);
  	});
  }

  addRoom(){
  	this.navCtrl.push(AddRoomPage);
  }
  joinRoom(key){
  	this.navCtrl.setRoot(HomePage, {
  		key:key,
  		nickname:this.navParams.get("nickname")
  	});
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad RoomPage');
  }

}
export const snapshotToArray = snapshot => {
	let returnArr = [];

	snapshot.forEach(childSnapshot =>{
		let item = childSnapshot.val();
		item.key = childSnapshot.key;
		returnArr.push(item);
	});
	return returnArr;
}
<ion-header>
  <ion-navbar>
    <ion-title>{{ 'Room' | translate }}</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="addRoom()">
        <ion-icon name="add-circle"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let room of rooms">
      {{room.roomname}}
      <ion-icon name="chatboxes" item-end (click)="joinRoom(room.key)"></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>

ref = firebase.database().ref('chatrooms/');

Upvotes: 1

Views: 279

Answers (1)

Imdad Ali
Imdad Ali

Reputation: 737

replace import * as firebase from 'firebase/app'; with import * as firebase from 'firebase';

Upvotes: 1

Related Questions