Loading is not working


#1

when I am trying to include loading it throws this error in console.Can you guys help in this

core.js:1449 ERROR Error: Uncaught (in promise): TypeError: Object(…) is not a function
TypeError: Object(…) is not a function
at DomSanitizerImpl.sanitize (platform-browser.js:2051)
at setElementProperty (core.js:10795)
at checkAndUpdateElementValue (core.js:10715)
at checkAndUpdateElementInline (core.js:10649)
at checkAndUpdateNodeInline (core.js:13931)
at checkAndUpdateNode (core.js:13878)
at debugCheckAndUpdateNode (core.js:14771)
at debugCheckRenderNodeFn (core.js:14750)
at Object.eval [as updateRenderer] (LoadingCmp.html:1)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
at DomSanitizerImpl.sanitize (platform-browser.js:2051)
at setElementProperty (core.js:10795)
at checkAndUpdateElementValue (core.js:10715)
at checkAndUpdateElementInline (core.js:10649)
at checkAndUpdateNodeInline (core.js:13931)
at checkAndUpdateNode (core.js:13878)
at debugCheckAndUpdateNode (core.js:14771)
at debugCheckRenderNodeFn (core.js:14750)
at Object.eval [as updateRenderer] (LoadingCmp.html:1)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at OverlayPortal.NavControllerBase._fireError (nav-controller-base.js:223)
at OverlayPortal.NavControllerBase._failed (nav-controller-base.js:216)
at nav-controller-base.js:263
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.js:4760)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3


#2

Can you show your code that causes this error?


#3

this.loading = this.loadingCtrl.create({
content: ‘Signing In…’,
spinner: ‘ios’,
duration: 3000,
dismissOnPageChange:true
});


#4

That looks correct.

Can you post your entire .html & .ts code from that page?
That will probably give us more insight to fix the issue.


#5

ts file

import { Component, ViewChild, OnInit } from ‘@angular/core’;
import { Nav, IonicPage, NavController, LoadingController } from ‘ionic-angular’;
import { FormBuilder, Validators, FormGroup, FormControl } from ‘@angular/forms’;

import { WelcomePage } from ‘…/welcome/welcome’;
import { ForgetpasswordPage } from ‘…/forgetpassword/forgetpassword’;
import { DashBoardPage } from ‘…/dashBoard/dashBoard’;
import { CartService } from “…/…/services/cartService”;
import { SignupPage } from ‘…/signup/signup’;
import { Constants } from ‘…/…/constants/constants’;
import { Configuration } from “…/…/configuration/customer.config”;
import { Events } from ‘ionic-angular/util/events’;
import { Merchant } from ‘…/…/models/merchant.model’;
import { MerchantService } from ‘…/…/services/merchant.service’;
import { DeliveryMethod } from ‘…/…/models/deliveryMethod.model’;

@IonicPage()

@Component({
selector: ‘page-signin’,

templateUrl: 'signin.html'

})

export class SigninPage implements Validators {

loginForm: FormGroup;
signInCredentails = {
    UserName: '',
    Password: ''
}
public loginErrorMessage: string = null;
loading: any;
public showPwd: boolean = false;
public passwordTextBox: string = 'password';
public Email_ErrorMessage: string = null;
public Password_ErrorMessage: string = null;
public deliveryMethods: any;

constructor(public navCtrl: NavController,
  public nav: Nav,
  public formBuilder: FormBuilder,
  public cartService: CartService,
  public loadingCtrl: LoadingController,
  public constants: Constants,
  public customerConfig: Configuration,
  public merchantService: MerchantService,
  public events: Events) {
    this.loginForm = this.formBuilder.group({
        'email': ['', Validators.compose([Validators.required, this.validateEmailAndPhone.bind(this)])],
        'password': ['', Validators.compose([Validators.minLength(8), Validators.required])]
    });

    this.deliveryMethods = [
        { Delivery_Id: 301, Delivery_Type: this.constants.DeliveryMethod_PickUp },
        { Delivery_Id: 302, Delivery_Type: this.constants.DeliveryMethod_Home },
    ];

    //Loading Progress
    this.loading = this.loadingCtrl.create({
     content: 'Signing In...',
     spinner: 'ios',
     duration: 3000,
      dismissOnPageChange:true
     });

    this.Email_ErrorMessage = constants.Email_ErrorMessage;
    this.Password_ErrorMessage = constants.Password_ErrorMessage;

}

validateEmailAndPhone(control: FormControl): { email: boolean } {
    if (control.value && (control.value.match(/[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/) || (control.value.match(/[0-9]{10}/) && control.value.length === 10))) {
        return null;
    }
    else {
        return { email: false };
    }
}

goBack() {
    this.navCtrl.parent.parent.push('WelcomePage');
}
forget() {
    this.navCtrl.parent.parent.push('ForgetpasswordPage');
}
login() {
    this.loading.present();
    this.signInCredentails.UserName = this.signInCredentails.UserName.trim();
    this.cartService.login(this.signInCredentails)
        .subscribe(data => {
            this.customerConfig.CustomerDetail = data;
            if (data['Customer_Id'] != 0) {
              this.customerConfig.CustomerDetail.Customer_Id = data['Customer_Id'];
            this.customerConfig.CustomerDetail.AvatarLetters =
                this.customerConfig.CustomerDetail.FirstName[0] + this.customerConfig.CustomerDetail.LastName[0];
                this.cartService.setCutomerInfo(data);
                this.cartService.setCustomerId(data['Customer_Id']);
                this.cartService.getOrdersByCustomer(data['Customer_Id']).subscribe(orderData => {
                    if (orderData != null && orderData.length != null && orderData.length > 0)
                    {
                      let dm = new DeliveryMethod();
                        if (orderData[0].Delivery_Id == 301) {
                            this.customerConfig.CustomerDetail.DefaultDeliveryMethod = this.deliveryMethods[0];
                            dm.Delivery_Id = this.deliveryMethods[0].Delivery_Id;
                        dm.Delivery_Type = this.deliveryMethods[0].Delivery_Type;
                        }
                        else {
                            this.customerConfig.CustomerDetail.DefaultDeliveryMethod = this.deliveryMethods[1];
                            dm.Delivery_Id = this.deliveryMethods[1].Delivery_Id;
                        dm.Delivery_Type = this.deliveryMethods[1].Delivery_Type;
                        }
                        this.merchantService.setDefaultDeliveryMethod(dm);

                        this.cartService.getMerchantDetails(orderData[0].Merchant_Id).subscribe(merchantData => {
                            if (merchantData != null) {
                                this.customerConfig.CustomerDetail.DefaultMerchantObject = merchantData;
                                let merchant = new Merchant();
                                merchant.Merchant_Id = merchantData.Merchant_Id;
                                merchant.FirstName = merchantData.FirstName;
                                merchant.LastName = merchantData.LastName;
                                merchant.StoreName = merchantData.StoreName;
                                this.merchantService.setDefaultMerchantDetails(merchant);
                            }
                            else
                            {
                              this.customerConfig.CustomerDetail.DefaultMerchantObject = new Merchant();
                            }
                        });
                    }
                    else {
                      this.customerConfig.CustomerDetail.DefaultMerchantObject = new Merchant();;
                        this.customerConfig.CustomerDetail.DefaultDeliveryMethod = this.deliveryMethods[0];
                        let dm = new DeliveryMethod();
                        dm.Delivery_Id = this.deliveryMethods[0].Delivery_Id;
                        dm.Delivery_Type = this.deliveryMethods[0].Delivery_Type;
                        this.merchantService.setDefaultDeliveryMethod(dm);
                    }

                    this.cartService.getAddress(data['Customer_Id']).subscribe(addressData => {
                        if (addressData != null && addressData.length != null && addressData.length >0) {
                            this.customerConfig.CustomerDetail.DefaultDeliveryAddress = addressData[0];
                        }
                    });
                });

                this.events.publish('login:success', this.customerConfig.CustomerDetail);

                this.nav.setRoot('DashBoardPage');
            } else {
                this.loginErrorMessage = this.constants.Login_ErrorMessage;
            }

             this.loading.dismiss();
        },
        (err) => {
            this.loading.dismiss();
            this.loginErrorMessage = this.constants.Error_Message;
        },
        () => { console.log('complete');}
        );

}
Customer() {
    this.navCtrl.parent.parent.push('DashBoardPage');
}

CreateAnAccount() {
    this.navCtrl.push('SignupPage');
}

showPassword(): any {
  this.passwordTextBox = this.passwordTextBox === 'password' ? 'text' : 'password';
}

}