Core_1.profide is not a function - core_1.provide(auth_1.FirebaseAuth, {


#1

I am using Ionic 2:

Your system information:

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed

When I run ionic serve, I get the following errors in the CLI:

[13:55:44]  ionic-app-scripts 0.0.47
[13:55:44]  watch started ...
[13:55:44]  build dev started ...
[13:55:44]  clean started ...
[13:55:44]  clean finished in 16 ms
[13:55:44]  copy started ...
[13:55:44]  transpile started ...
[13:55:52]  template error, "E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\pages\login\build\pages\login\login.html":
            Error: ENOENT: no such file or directory, open
            'E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\pages\login\build\pages\login\login.html'
[13:55:52]  template error, "E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\pages\home\build\pages\home\home.html":
            Error: ENOENT: no such file or directory, open
            'E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\pages\home\build\pages\home\home.html'
[13:55:52]  transpile finished in 8.10 s
[13:55:52]  webpack started ...
[13:55:53]  copy finished in 8.46 s
[13:56:13]  webpack finished in 20.63 s
[13:56:13]  sass started ...
[13:56:16]  sass finished in 3.37 s
[13:56:16]  build dev finished in 32.15 s
[13:56:17]  watch ready in 32.35 s
[13:56:17]  dev server running: http://localhost:8100/

And the following in the browser when the page tries to open:

enter image description here

There error is occurring here in main.js (core_1.provide(auth_1.FirebaseAuth, {):

exports.AngularFire = AngularFire;
exports.COMMON_PROVIDERS = [
    core_1.provide(auth_1.FirebaseAuth, {
        useExisting: auth_1.AngularFireAuth
    }),
    {
        provide: tokens_1.FirebaseApp,
        useFactory: _getFirebase,
        deps: [tokens_1.FirebaseConfig]
    },
    auth_1.AngularFireAuth,
    AngularFire,
    database_1.FirebaseDatabase
];

If anyone can help me resolve this, I would appreciate it.

More info:

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { FIREBASE_PROVIDERS, defaultFirebase } from 'angularfire2';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage
  ],
  providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler },
    FIREBASE_PROVIDERS, defaultFirebase({
      apiKey: "xxxxx-xxxx",
      authDomain: "xxxx.firebaseapp.com",
      databaseURL: "https://xxxx.firebaseio.com",
      storageBucket: "xxxx.appspot.com"
    })]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { FirebaseAuth } from 'angularfire2';
//declare var firebase: any;
import firebase from 'firebase'

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = LoginPage;

  constructor(platform: Platform, private auth: FirebaseAuth) {
    firebase.initializeApp({
      apiKey: "xxxx-xxx",
      authDomain: "xxxx.firebaseapp.com",
      databaseURL: "https://xxxx.firebaseio.com",
      storageBucket: "xxxx.appspot.com"
    });

    this.auth.subscribe((data) => {
      if (data) {
        window.localStorage.setItem('uid', data.auth.uid);
        window.localStorage.setItem('displayName', data.auth.displayName);
        window.localStorage.setItem('photoURL', data.auth.photoURL);
        this.rootPage = HomePage;
      }
    });
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

home.ts

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {LoginPage} from '../login/login';
import {
  FirebaseAuth,
  AngularFire,
  FirebaseListObservable
} from 'angularfire2';


@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  firelist: FirebaseListObservable<any>;
  chat: any;
  constructor(public nav: NavController, public af: AngularFire, public auth: FirebaseAuth) {
    this.firelist = this.af.database.list('/chat', { //mengambil data
      query: {
        orderByChild: 'negativtimestamp', //order dari data yang terbaru
      }
    });
  }

  chatSend(va, vi) { //mengirim pesan chat
    this.af.database.list('/chat').push({ // menambahkan data chat ke firebase
      uid: window.localStorage.getItem('uid'),
      img: window.localStorage.getItem('photoURL'),
      username: window.localStorage.getItem('displayName'),
      chat_text: va.chatText,
      timestamp: Date.now(),
      negativtimestamp: -Date.now() //buat nanti ambil data yang terbaru
    })
    this.chat = '';
  }

  logout() { // melakukan logout
    window.localStorage.removeItem('email'); // remove email dari localStorage
    window.localStorage.removeItem('uid'); // remove uid dari localStorage
    window.localStorage.removeItem('displayName'); // remove displayName dari localStorage
    this.auth.logout();
    this.nav.setRoot(LoginPage);// kembali ke halaman LoginPage
  }

}

login.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {FirebaseAuth, AuthProviders, AuthMethods} from 'angularfire2';
import {HomePage} from '../home/home';

@Component({
  templateUrl: 'build/pages/login/login.html',
})
export class LoginPage {

  constructor(private nav: NavController, public auth: FirebaseAuth) {

  }

  LoginGoogle(){
    this.auth.login({
      provider: AuthProviders.Google,
      method: AuthMethods.Redirect,
    }).then((Data) => {
      this.nav.setRoot(HomePage);
    }).catch((error) => {
      console.log(error);
    })
  }

}

pacjage.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "angularfire2": "^2.0.0-beta.3-0930330",
    "firebase": "^3.3.0",
    "ionic-angular": "2.0.0-rc.4",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.47",
    "typescript": "^2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "theWhoZoo-chat: An Ionic project"
}

#2

Corrected login.ts. home.ts near (i.e. remove full path) which solves errors in the CLI:

@Component({
   templateUrl: 'login.html'
})

But still need to solve:

core_1.profide is not a function

which is here:

main.js (core_1.provide(auth_1.FirebaseAuth, {):


#3

Upgraded to latest angularfire2 and this fixed it.

npm install firebase angularfire2@latest --save