0

Buenas a toda la comunidad de stackoverflow, bueno sin mucho preludio mi problema es el siguiente. Actualmente estoy creando una app con Ionic 3 para entrenamiento personal y estoy realizando la autenticación con firebase. Para eso he instalado los siguientes paquetes de la siguiente forma:

npm install firebase angularfire2 --save

Tengo instalado lo siguiente para trabajar

cli packages:

@ionic/cli-utils  : 1.18.0
ionic (Ionic CLI) : 3.18.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 2.0.2
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.5.2

System:

Node : v8.8.1
npm  : 5.2.0
OS   : Windows 10

Environment Variables:

ANDROID_HOME : not set

Entonces para empezar en el archivo package.json tengo lo siguiente:

{
  "name": "mybox",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@angular/tsc-wrapped": "^4.4.6",
    "@ionic-native/core": "^3.12.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "2.0.1",
    "angularfire2": "^5.0.0-rc.3",
    "autoprefixer": "^7.1.6",
    "cordova-android": "^6.2.3",
    "cordova-browser": "^4.1.0",
    "cordova-plugin-console": "^1.0.5",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.2",
    "cordova-plugin-whitelist": "^1.3.1",
    "cordova-sqlite-storage": "^2.0.4",
    "firebase": "^4.6.1",
    "inquirer": "^3.3.0",
    "ionic-angular": "3.5.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "isobject": "^3.0.1",
    "rxjs": "5.4.0",
    "setimmediate": "^1.0.5",
    "sw-toolbox": "3.6.0",
    "uk.co.workingedge.cordova.plugin.sqliteporter": "^1.0.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "2.0.2",
    "ionic": "3.16.0",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-sqlite-storage": {},
      "uk.co.workingedge.cordova.plugin.sqliteporter": {}
    },
    "platforms": [
      "android",
      "browser"
    ]
  }
}

Ok en el archivo app.module.ts he importado lo correspondiete a firebase de la siguiente manera:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';

import firebase from 'firebase';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TabsPageModule } from '../pages/tabs/tabs.module';
import { SessionPageModule } from '../pages/auth/session/session.module';
import { PasswordResetPageModule } from '../pages/auth/password-reset/password-reset.module';
import { RegisterPageModule } from '../pages/auth/register/register.module';
import { WodsPageModule } from '../pages/wods/wods.module';
import { WodPageModule } from '../pages/wod/wod.module';
import { AddWodPageModule } from '../pages/add-wod/add-wod.module';
import { AddExercisePageModule } from '../pages/add-exercise/add-exercise.module';
import { WorkOfDayPagePageModule } from '../pages/work-of-day/work-of-day.module';
import { AddWorkOfDayPageModule } from '../pages/add-work-of-day/add-work-of-day.module';
import { WodTypeService } from '../services/wodtype';
import { CategoryService } from '../services/category';
import { ExerciseService } from '../services/exercise';
import { WodService } from '../services/wod';
import { WorkOfDayService } from '../services/work-of-day';
import { AuthService } from '../services/authentication';
import { TimerPickerComponent } from '../components/timer-picker/timer-picker';
import { FIREBASE_CONF } from '../firebase/firebase';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    TimerPickerComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    WodPageModule,
    TabsPageModule,
    WodsPageModule,
    AddWodPageModule,
    SessionPageModule,
    RegisterPageModule,
    AddExercisePageModule,
    AddWorkOfDayPageModule,
    WorkOfDayPagePageModule,
    PasswordResetPageModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(FIREBASE_CONF),
    AngularFireAuthModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    TimerPickerComponent
  ],
  providers: [
    StatusBar,
    WodService,
    AuthService,
    SplashScreen,
    WodTypeService,
    CategoryService,
    ExerciseService,
    WorkOfDayService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Este es el archivo (firebase.ts) que contiene lo relacionado a la configuración web para la conexión al proyecto en la plataforma firebase: "Aquí solo muestro parte de la configuración"

export const FIREBASE_CONF = {
      apiKey: "AIzaSyCQIaHREfsuNtIaIS6P53fdMwXysqnOGas",
      authDomain: "my-box-16212.firebaseapp.com"
};

Muy bien, también cuento con este pequeño servicio (authentication.ts) que por ahora sirve para el registro de usuarios con firebase:

import { Injectable } from '@angular/core';

import { AngularFireAuth } from 'angularfire2/auth';

@Injectable()
export class AuthService{

  constructor(private afAuth: AngularFireAuth){}

  userRegister(email: string, password:string){
    return this.afAuth.auth.createUserWithEmailAndPassword(email, password);
  }
}

Por ultimo llamo tengo este archivo llamado register.ts en donde importo el servicio anterior y llamo a su único método pasandole un email y contraseña dados por un usuario desde un formulario de registro.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import { NavController, ToastController } from 'ionic-angular';
import { AuthService } from '../../../services/authentication';

@Component({
  selector: 'page-register',
  templateUrl: 'register.html',
})
export class RegisterPage implements OnInit{

  private registerForm: FormGroup;

  constructor(private navCtrl: NavController,
              private formBuilder: FormBuilder,
              private authServ: AuthService,
              private toastCtrl: ToastController) {
  }

  ngOnInit(){
    this.initForm();
  }

  onSubmit(){
    this.authServ.userRegister(this.registerForm.controls['email'].value, this.registerForm.controls['password'].value)
        .then((res) => {
          /*this.showToastMessage('Welcome');*/
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
  }

  private initForm(){
    this.registerForm = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    })
  }

  private showToastMessage(message: string){
    let toast = this.toastCtrl.create({
      message: message,
      duration: 3000
    });
    toast.present();
  }
}

Muy bien hasta aquí todo bien, pero a la hora de ejecutar la aplicación me genera el siguiente error:

Uncaught Error: Cannot find module "@firebase/auth"
    at webpackMissingModule (index.js:17)
    at Object.<anonymous> (index.js:17)
    at __webpack_require__ (bootstrap 5f39c888e1091eeaaee8:54)
    at Object.<anonymous> (vendor.js:62482)
    at __webpack_require__ (bootstrap 5f39c888e1091eeaaee8:54)
    at Object.<anonymous> (vendor.js:112360)
    at __webpack_require__ (bootstrap 5f39c888e1091eeaaee8:54)
    at Object.<anonymous> (obj.js:135)
    at __webpack_require__ (bootstrap 5f39c888e1091eeaaee8:54)
    at Object.287 (main.ts:5)

Ok la verdad ya he visto y probado una gran cantidad de posibles soluciones a mi problema y nada, aún persiste. Si alguien ha tenido este problema o sabe una posible solución, estaré agradecido. A lo mejor es algo tonto o algo se me esta pasando por alto pero espero que alguien me pueda ayudar, ya llevo tiempo con este problema.

1 respuesta 1

1

Estimado,

Tengo una configuración muy similar a la tuya, salvo los imports en tu archivo app.module.ts

para probar quitaría esta línea del archivo app.module.ts:

-- import firebase from 'firebase';

y la agregaría solo en el service/provider authentication.ts :

++ import * from 'firebase';

como consejo, agrega a las funciones que creas el tipo de variable a retornar. Con esto después resulta mucho más fácil hacer el debug en caso de que te encuentres con errores :

authentication.ts

-- userRegister(email: string, password:string){
++ userRegister(email: string, password:string): Promise<any> {

Llega un poco tarde la respuesta, pero espero que sea de ayuda para alguien más. Saludos

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.