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.