Ionic - TypeError: console.log is not a function


#1

I get this weird error that console.log is not a function. I have not clue what’s causing this. It work’s fine in the entire app but throws this error only on a specific screen where I open a modal to edit form data.

core.es5.js:1020 ERROR TypeError: console.log is not a function
at SearchSuburbPage.webpackJsonp.417.SearchSuburbPage.ionViewDidEnter (search-suburb.ts:24)
at ModalImpl.ViewController._lifecycle (view-controller.js:566)
at ModalImpl.ViewController._didEnter (view-controller.js:466)
at OverlayPortal.NavControllerBase._didEnter (nav-controller-base.js:982)
at OverlayPortal.NavControllerBase._transitionFinish (nav-controller-base.js:776)
at nav-controller-base.js:757
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.es5.js:3890)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)

Package.json is as follows:

{
“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”
},
“config”: {
“ionic_copy”: “./config/copy.config.js”
},
“dependencies”: {
"@angular/common": “4.4.3”,
"@angular/compiler": “4.4.3”,
"@angular/compiler-cli": “4.4.3”,
"@angular/core": “4.4.3”,
"@angular/forms": “4.4.3”,
"@angular/http": “4.4.3”,
"@angular/platform-browser": “4.4.3”,
"@angular/platform-browser-dynamic": “4.4.3”,
"@ionic-native/core": “4.3.0”,
"@ionic-native/network": “^4.3.2”,
"@ionic-native/splash-screen": “4.3.0”,
"@ionic-native/status-bar": “4.3.0”,
"@ionic/storage": “^2.0.1”,
“cordova-android”: “^6.2.3”,
“cordova-plugin-device”: “^1.1.4”,
“cordova-plugin-ionic-webview”: “^1.1.11”,
“cordova-plugin-network-information”: “^1.3.3”,
“cordova-plugin-splashscreen”: “^4.0.3”,
“cordova-plugin-statusbar”: “git+https://github.com/apache/cordova-plugin-statusbar.git”,
“cordova-plugin-whitelist”: “^1.3.1”,
“font-awesome”: “^4.7.0”,
“ionic-angular”: “3.7.1”,
“ionic-plugin-keyboard”: “^2.2.1”,
“ionicons”: “3.0.0”,
“moment”: “^2.19.1”,
“moment-timezone”: “^0.5.13”,
“rxjs”: “5.4.3”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.18”
},
“devDependencies”: {
"@ionic/app-scripts": “3.0.1”,
"@types/moment-timezone": “^0.5.1”,
“typescript”: “2.3.4”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-device”: {},
“cordova-plugin-ionic-webview”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-whitelist”: {},
“ionic-plugin-keyboard”: {},
“cordova-plugin-network-information”: {}
},
“platforms”: [
“android”
]
}
}


#2

try to include dom in your tsconfig.json:

  "lib": [
      "dom",
      "es2015"
    ],

#3

It’s already there. tsconfig.json is as follows:

{
“compilerOptions”: {
“allowSyntheticDefaultImports”: true,
“declaration”: false,
“emitDecoratorMetadata”: true,
“experimentalDecorators”: true,
“lib”: [
“dom”,
“es2015”
],
“module”: “es2015”,
“moduleResolution”: “node”,
“sourceMap”: true,
“target”: “es5”
},
“include”: [
“src/**/*.ts”
],
“exclude”: [
“node_modules”
],
“compileOnSave”: false,
“atom”: {
“rewriteTsconfig”: false
}
}


#4

can you show us some code samples or a project that replicates that error?


#5

Sure. From example when I call the selectClientModal($event) it throws the error at line 181(see bold section) in edit-modal.ts. If you notice the .ts file I have commented out all the console.log lines. It works for the time being but that obviously not the solution. Funny thing is that I have used console.log everywhere but it only throws the error from this page onwards.

edit-job.html file(this is only part of the code):

  <ion-item>
    <ion-label stacked>Client Name*</ion-label>
    <ion-input type="search" (ionFocus)=selectClientModal($event) [(ngModel)]="clientName" name="clientName" autocomplete="on"  required></ion-input>
  </ion-item>

edit-job.ts file(it throws an error everywhere at the console.log and also in the modal when the modal is opened)

import { Component } from ‘@angular/core’;
import { IonicPage, AlertController, NavController, NavParams, ViewController, ModalController, LoadingController } from ‘ionic-angular’;
import { Storage } from ‘@ionic/storage’;

import moment from ‘moment’;
import ‘moment-timezone’;

import { ApiserviceProvider } from ‘…/…/providers/apiservice/apiservice’;

@IonicPage()
@Component({
selector: ‘page-edit-job’,
templateUrl: ‘edit-job.html’,
})
export class EditJobPage {

job: any;
user_id: any;
driver: any;
driverID: any;
suburb1: any = [{_id:’’}];
suburb2: any;
suburb2ID: any;
pickUpSuburb: any;
dropSuburb: any;
rateLevel: any;
storyDesc: any;

rate: any;
client: any = [{_id:’’}];
items: any;
loading: any;

jobDate: any;
clientName: any;
PickUp: any;
Drop: any;
assignedTo: any;
RateLevel: any;
Notes: any;
story: boolean = false;
story_desc: any;

myDate: any;

constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, public modalCtrl: ModalController, public apiservice: ApiserviceProvider, public loadingCtrl: LoadingController, public alertCtrl: AlertController, public storage: Storage) {

      this.storage.get('user_id').then((data) => {
          this.user_id = data;
          console.log("User Id: "+this.user_id)
      
          this.job = navParams.get('job');
          console.log = this.job;

          this.jobDate = this.job.jobDate;
          
          this.clientName = this.job.client.client; 
          this.client._id = this.job.client._id;            

          this.pickUpSuburb = this.job.pickUpSuburb.suburb;
          this.suburb1._id = this.job.pickUpSuburb._id;

          if(this.dropSuburb){              
            this.dropSuburb = this.job.dropSuburb.suburb;
          }

          if(this.rateLevel){
            this.rateLevel = this.job.rateLevel;    
          }

          if(this.story){
            this.story = this.job.story;
          }     

          if(this.storyDesc){
            this.storyDesc = this.job.storyDesc;
          }     

          if(this.assignedTo){
            this.assignedTo = this.job.assignedTo.name;
          }     

      });

}

ionViewDidLoad() {
console.log(‘ionViewDidLoad AddNewJobPage’);

this.rate =[
	{level:'6TT'},
	{level:'8TT'},
	{level:'12TT'},
	{level:'8TC'},
	{level:'12TC'},
	{level:'Semi Trailer'},
];

}

save(form){

/*
let alert = this.alertCtrl.create({
title: ‘In Progress’,
subTitle: ‘This feature is under development…’,
buttons:
[
{
text: ‘Ok’,
handler: () => {

                    }
                  }
    ]    
  });
  alert.present();

*/

this.presentLoading();

/*
 console.log("Job Date: "+moment(form.value.jobDate).tz('Australia/Sydney').format('YYYY-MM-DDT00:00:00.000'));
 console.log("Job Date: "+form.value.jobDate);
 console.log(form.value.clientName);
 console.log(form.value.pickUpSuburb);
 console.log(form.value.dropSuburb);
 console.log(form.value.rateLevel);
 console.log(form.value.story);
 console.log(form.value.storyDesc);
 console.log(form.value.assignedTo);
  */

  let newDate = moment(form.value.jobDate).tz('Australia/Sydney').format('YYYY-MM-DDT00:00:00.000');

// console.log("New Job Date: "+newDate);

// ----------- Object to store visitor info -----------

let info = {
  job_id : this.job._id,
  jobDate: moment(form.value.jobDate).tz('Australia/Sydney').format('YYYY-MM-DDT00:00:00.000'),
  client: this.client._id,
  pickUpSuburb: this.suburb1._id,
  dropSuburb: this.suburb2ID,
  weight: form.value.weight,
  length: form.value.lenght,
  rateLevel: form.value.rateLevel,
  story: form.value.story,
  storyDesc: form.value.storyDesc,
  assignedTo: this.driverID,
  addedBy: this.user_id
};

// console.log("Job Info: "+info);

// -------------------- Insert Into DB ----------------------


  this.apiservice.editJob(info).then((data) => {
//      console.log(data);          
      this.dismissLoading();

        if(data == 'Success'){
//              console.log("Succcess. Presenting alert...");
              this.presentAlert();
        }
        else
        {
//            console.log("Error. Please Try Again.");
            this.presentErrorAlert();
        }
    
  });

}

 **selectClientModal(ev: any){**

// console.log(“Modal opened”);
let modal = this.modalCtrl.create(‘SearchClientPage’, { userId: 8675309 });

 // When the modal is dismissed the selected info is returned here. 
 modal.onDidDismiss(data => {

// console.log("Selected Client is: "+JSON.stringify(data));
this.client = data;
this.clientName = data.client;
// console.log("Selected Client Id: "+this.client._id);
});

  modal.present();
 }

selectDriverModal(ev: any){

// console.log(“Driver Modal opened”);
const modal2 = this.modalCtrl.create(‘SearchDriverPage’, { userId: 8675309 });

 // When the modal is dismissed the selected info is returned here. 
 modal2.onDidDismiss(data => {

// console.log("Selected Driver is: "+JSON.stringify(data));
this.driver = data;
this.assignedTo = this.driver.name;
// console.log("Driver Name: "+this.assignedTo);
this.driverID = this.driver._id;
// console.log("Selected Driver Id: "+this.driverID);
});

modal2.present();

}

pickUpSuburbModal(ev: any){

// console.log(“Modal opened”);
const modal3 = this.modalCtrl.create(‘SearchSuburbPage’, { userId: 8675309 });

 // When the modal is dismissed the selected info is returned here. 
 modal3.onDidDismiss(data => {

// console.log("pickUp Suburb is: "+JSON.stringify(data));
this.suburb1 = data;
this.pickUpSuburb = this.suburb1.suburb;
// console.log("pickUp Suburb Id: "+this.suburb1._id);
});

modal3.present();

}

dropSuburbModal(ev: any){

// console.log(“Modal opened”);
const modal4 = this.modalCtrl.create(‘SearchSuburbPage’, { userId: 8675309 });

 // When the modal is dismissed the selected info is returned here. 
 modal4.onDidDismiss(data => {

// console.log("drop Suburb is: "+JSON.stringify(data));
this.suburb2 = data;
this.suburb2ID = data._id;
this.dropSuburb = data.suburb;
// console.log("drop Suburb Id: "+this.suburb2ID);
});

modal4.present();

}

cancel(){
this.viewCtrl.dismiss();
}

presentLoading(){

this.loading = this.loadingCtrl.create({
  content: 'Please wait...'
});
this.loading.present();

}

dismissLoading(){
this.loading.dismiss();
}

presentAlert(){
let alert = this.alertCtrl.create({
title: ‘Success’,
subTitle: ‘Changes Saved Successfully!’,
buttons:
[
{
text: ‘Ok’,
handler: () => {
// console.log(‘Ok clicked’);
this.viewCtrl.dismiss();
}
}
]
});
alert.present();
}

presentErrorAlert(){
let alert = this.alertCtrl.create({
title: ‘Error’,
subTitle: ‘Could not be save. Please Try Again.!’,
buttons:
[
{
text: ‘Ok’,
handler: () => {
// console.log(‘Ok clicked’);
}
}
]
});
alert.present();
}

}


#6

I just realised the code is not legible. Not sure how else can I share this. :-/


#7

This is the error I get:

core.es5.js:1020 ERROR TypeError: console.log is not a function
at ViewJobsPage.Array.concat.ViewJobsPage.ionViewDidEnter (view-jobs.ts:35)
at ViewController._lifecycle (view-controller.js:566)
at ViewController._didEnter (view-controller.js:466)
at Tab.NavControllerBase._didEnter (nav-controller-base.js:982)
at Tab.NavControllerBase._transitionFinish (nav-controller-base.js:776)
at nav-controller-base.js:757
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.es5.js:3890)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)


#8

So I deleted the page, added the page ading and rewrote the code. Works properly now. Weird. :-/