Undefined is not an object (evaluating 'type.parameters')

Question

I'm following this tutorial : https://javebratt.com/angularfire2-email-auth/ and I get a weird error.

I'm at the login page implementation, and I have already implemented these two files

login.ts

import {
  NavController,
  LoadingController,
  AlertController
} from 'ionic-angular';
import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { AuthData } from '../../providers/auth-data';

import { Page1 } from '../../pages/page1/page1';
import { SignupPage } from '../../pages/signup/signup';
import { ResetPasswordPage } from '../../pages/reset-password/reset-password';

import { EmailValidator } from '../../validators/email';


/*
  Generated class for the Login page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
  public loginForm: any;
  emailChanged: boolean = false;
  passwordChanged: boolean = false;
  submitAttempt: boolean = false;
  public loading: any;

  constructor(public nav: NavController, public authData: AuthData,
public formBuilder: FormBuilder, public alertCtrl: AlertController,
public loadingCtrl: LoadingController) {
    this.loginForm = formBuilder.group({
      email: ['', Validators.compose([Validators.required, 
        EmailValidator.isValid])],
      password: ['', Validators.compose([Validators.minLength(6), 
      Validators.required])]
    });
  }


  goToResetPassword(){
    this.nav.push(ResetPasswordPage);
  }

  createAccount(){
    this.nav.push(SignupPage);
  }

  ionViewDidLoad() {
    console.log('Hello LoginPage Page');
  }

  elementChanged(input){
    let field = input.inputControl.name;
    this[field + "Changed"] = true;
  }

  loginUser(){
      this.submitAttempt = true;

      if (!this.loginForm.valid){
        console.log(this.loginForm.value);
      } else {
        this.authData.loginUser(this.loginForm.value.email, 
          this.loginForm.value.password).then( authData => {
            this.nav.setRoot(Page1);
      }, error => {
        this.loading.dismiss().then( () => {
          let alert = this.alertCtrl.create({
            message: error.message,
            buttons: [
            {
              text: "Ok",
              role: 'cancel'
            }
            ]
          });
        alert.present();
        });
      });

      this.loading = this.loadingCtrl.create({
        dismissOnPageChange: true,
      });
      this.loading.present();
      }
  }

}

and auth-data.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

import { AngularFire } from 'angularfire2';


@Injectable()
export class AuthData {
  fireAuth: any;
  constructor(public af:AngularFire) {
    console.log('Hello AuthData Provider');
    af.auth.subscribe(user => {
        if(user){
            this.fireAuth = user.auth;
            console.log(user);
        }
    })
  }
  loginUser(newEmail: string, newPassword: string): any {
    return this.af.auth.login({ email: newEmail, password: newPassword });
  }

  resetPassword(email: string): any {
    return firebase.auth().sendPasswordResetEmail(email);
  }

  logoutUser(): any {
    return this.af.auth.logout();
  }

  signupUser(newEmail: string, newPassword: string): any {
    return this.af.auth.createUser({ email: newEmail, password: newPassword });
  }
}

But when I do 'ionic serve' I get the following weird error about by login.ts

Property 'loginUser' does not exist on type 'AuthData'

This loginUser function is here in my auth-data.ts , so I don't understand what it means .

My guess would have been that 'this.authData' is never initiated, but even when I add this.authData = authData in the constructor, it does not change anything. (that also says that I don't understand how it gets initiated)

Does anyone know why I get this loginUser error ?

Thanks a lot

EDIT:

Thanks to one of your advice below it seems like the error has disappeared and a new one is here (even if to be honest now even if I revert my change I still get the new error, I'm so confused)

Now the error I get in Safari is TypeError: undefined is not an object (evaluating 'type.parameters') and in Firefox : TypeError: type is undefined[En savoir plus]

Firefox console gives me

ReflectionCapabilitieshttp://localhost:8100/build/main.js:45824:1 Reflectorhttp://localhost:8100/build/main.js:45964:16 CompileMetadataResolverhttp://localhost:8100/build/main.js:25506:38 CompileMetadataResolverhttp://localhost:8100/build/main.js:25471:21 CompileMetadataResolverhttp://localhost:8100/build/main.js:25357:51 map self-hosted CompileMetadataResolverhttp://localhost:8100/build/main.js:25356:65 RuntimeCompilerhttp://localhost:8100/build/main.js:40363:24 RuntimeCompilercompileModuleAndComponents http://localhost:8100/build/main.js:40301:32 RuntimeCompilerhttp://localhost:8100/build/main.js:40292:16 PlatformRefbootstrapModuleWithZone http://localhost:8100/build/main.js:27765:16 PlatformRefhttp://localhost:8100/build/main.js:27747:16 http://localhost:8100/build/main.js:96568:1 webpack_require http://localhost:8100/build/main.js:20:12 http://localhost:8100/build/main.js:66:18

I'm so confused, something must be wrongly initiated but the error stack does not really help...

Could you expand you example with folder structure, just so that we can verify you are importing the correct auth-data.ts file? — Fjut

Fjut Fjut · Accepted Answer · 2016-12-18T16:29:49

My guess would have been that 'this.authData' is never initiated, but even when I add this.authData = authData in the constructor, it does not change anything. (that also says that I don't understand how it gets initiated)

You do not need to do that as angular injector takes care of the initialization of the providers. You can read more about that here

Regarding your issue, did you import and register your provider in the application root module, as stated in the tutorial?

Undefined is not an object (evaluating 'type.parameters')

2 Answers