No provider for Diagnostic!


#1

Hi,

I am using Ionic Diagnostic plugin to check location service state of my device. I have installed this plugin using following commands:

$ ionic plugin add --save cordova.plugins.diagnostic
$ npm install --save @ionic-native/diagnostic

When i try to check this on my device then i get following error:

EXCEPTION: Error in ./MyApp class MyApp - inline template:50:9 caused by: No provider for Diagnostic!

Here is HTML and TS File of my code:

HTML:

<ion-content>
        <div id="divHeading">
            <img class="title-image" src="assets/img/fulllogo.png"/>
        </div>
       <form [formGroup]="loginForm">
        <ion-list>
        <ion-item>
            <ion-label floating> Email ID </ion-label>
            <ion-input [(ngModel)]="login.email" type="email" formControlName="email" [class.invalid]="!loginForm.controls.email.valid && (loginForm.controls.email.dirty || submitAttempt)"></ion-input>
        </ion-item>
        <ion-item *ngIf="!loginForm.controls.email.valid  && (loginForm.controls.email.dirty || submitAttempt)">
    <p>Please enter a valid User Name.</p>
</ion-item>
        <ion-item>
            <ion-label floating> Password </ion-label>
            <ion-input [(ngModel)]="login.password" type="password" formControlName="password" [class.invalid]="!loginForm.controls.password.valid && (loginForm.controls.password.dirty|| submitAttempt)" ></ion-input>
        </ion-item>
        <ion-item *ngIf="!loginForm.controls.password.valid  && (loginForm.controls.password.dirty || submitAttempt)">
    <p>Please enter a valid Password.</p>
</ion-item>
        <ion-item>
            <ion-grid>
                <ion-row>
                    <button block ion-button (click)="onLogin(loginForm)">
                        <ion-icon name="ios-power"></ion-icon>
                    </button>
                </ion-row>
                <!--<ion-row>
                    <ion-col width-50>
                        <button block ion-button class="google" (click)="onGoogleLogin()"> Login with G+</button>
                    </ion-col>
                    <ion-col width-50>
                        <button block ion-button class="facebook" (click)="onFacebookLogin()"> Login with Fb</button>
                    </ion-col>
                </ion-row>-->
                <ion-row>
                    <ion-col width-50>
                        <button ion-button (click)="onForgotPassword()" clear>Forgot Password?</button>
                    </ion-col>
                    <ion-col width-50>
                        <button ion-button (click)="onSignup()" clear>Sign Up</button>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-item>
    </ion-list>
    </form>
</ion-content>

TS File:

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

import { AlertController, MenuController , NavController } from 'ionic-angular';

// app pages
import { SignupPage } from '../signup/signup';
import { ForgotPasswordPage } from '../forgot-password/forgot-password';
import { EventListPage } from '../../event/event-list/event-list';
import { DefaultdashboardPage } from '../../defaultdashboard/defaultdashboard';
import {ClassListPage } from '../../../pages/class/class-list/class-list';
import { Validators, FormControl, FormGroup, FormBuilder} from '@angular/forms';
import { AuthData } from '../../providers/auth-data';
import { Diagnostic } from '@ionic-native/diagnostic';



// services
import { UserData } from '../../../providers/user-data';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
  
  login: {email?: string, password?: string} = {};
  submitted = false;
  role: any;
  loginForm: FormGroup;
  submitAttempt: boolean = false;

  constructor(
    public alertController: AlertController,
    public menuCtrl: MenuController,
    public navCtrl: NavController, 
    public userData: UserData,
    public formBuilder: FormBuilder,
    public diagnostic: Diagnostic) {

    this.login.email = 'abc@abc.com';
    this.login.password = 'abc123';
    
    this.loginForm = formBuilder.group({
        id: [''],
        email: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$'), Validators.required])],
        password: ['', Validators.compose([Validators.required])]
    });
    
    this.userData.myRole$.subscribe( data => {
      this.role = data;
    });

   }

  onLogin(form) {
    this.submitAttempt = true;
    this.userData.showLoadingController();
    this.submitted = true;
    if (form.valid) {
      this.userData.login(this.login)
      .then(() => {
          this.LoginSuccess();
        }        
      )
      .catch(
        (error) => {
          this.userData.dismissLoadingController();
          this.LoginError(error);
        }
      );
    }
  }

  onGoogleLogin(){
    console.log("in google");
    this.userData.loginGoogle()
      .then(() => {
          this.LoginSuccess();
        }        
      )
      .catch(
        (error) => {
          this.LoginError(error);
        }
      );
  }

  onFacebookLogin(){
    console.log("in facebook");
    this.userData.loginFacebook()
      .then(() => {
          this.LoginSuccess();
        }        
      )
      .catch(
        (error) => {
          this.LoginError(error);
        }
      );
  }

  LoginSuccess() {
    setTimeout(() => {
        this.userData.setUserRole().then( () => {
          this.navCtrl.setRoot(ClassListPage, {}, {animate: true, direction: 'forward'});
        })
        .catch((error) => {
          this.navCtrl.setRoot(DefaultdashboardPage, {}, {animate: true, direction: 'forward'});
      });
      }, 1000);    
  }

  LoginError(error) {
    let alert = this.alertController.create({
      title: 'Login Failed',
      subTitle: 'Please check your email and/or password and try again',
      buttons: [
        {
          text: 'Ok',
          handler: () => {
            //do handler stuff here
          }
        }
      ]
    });
    alert.present();
  }

  onSignup() {
    this.navCtrl.push(SignupPage);
  }

  onForgotPassword() {
    this.navCtrl.push(ForgotPasswordPage);
  }

  ionViewDidEnter() {
    this.menuCtrl.enable(false);
    this.menuCtrl.swipeEnable(false);
  }

  ionViewWillLeave() {
    this.menuCtrl.enable(true);
    this.menuCtrl.swipeEnable(true);
  }

}

Can someone please have a look at it.


#2

You forgot to import the plugin in your app.module.ts file


#3

Thanks for quick response. I did add plugin in my app.module.ts but somehow path was not correct. Just changed it and its working fine. Thanks.