Uncaught EXCEPTION: Error during evaluation of "click"

Ionic Framework ionic-v3
1

Hi All,

getting below exception when navigating from one page to another

angular2-polyfills.js:324 Uncaught EXCEPTION: Error during evaluation of "click"
    ORIGINAL EXCEPTION: TypeError: Cannot read property 'annotations' of undefined
    ORIGINAL STACKTRACE:
    TypeError: Cannot read property 'annotations' of undefined
        at ReflectionCapabilities.annotations (http://192.168.0.101:8100/build/js/app.bundle.js:26281:40)
        at Reflector.annotations (http://192.168.0.101:8100/build/js/app.bundle.js:26423:48)
        at DirectiveResolver.resolve (http://192.168.0.101:8100/build/js/app.bundle.js:21217:44)
        at RuntimeMetadataResolver.getDirectiveMetadata (http://192.168.0.101:8100/build/js/app.bundle.js:8691:51)
        at TemplateCompiler.compileHostComponentRuntime (http://192.168.0.101:8100/build/js/app.bundle.js:10279:54)
        at RuntimeCompiler_.compileInHost (http://192.168.0.101:8100/build/js/app.bundle.js:8617:39)
        at NavController.loadPage (http://192.168.0.101:8100/build/js/app.bundle.js:44176:42)
        at NavController._render (http://192.168.0.101:8100/build/js/app.bundle.js:43837:18)
        at NavController._transition (http://192.168.0.101:8100/build/js/app.bundle.js:43802:14)
        at NavController._insertViews (http://192.168.0.101:8100/build/js/app.bundle.js:43462:26)
    ERROR CONTEXT:
    [object Object]

system information:

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.5 
ios-sim version: 5.0.8 
OS: Mac OS X El Capitan
Node Version: v4.4.1
Xcode version: Xcode 7.3 Build version 7D175
2

Could you provide some code - the code that you use to navigate and the source code of the other page?

3

We need more information here. What code is being run on click, whats the class look like

4

Thanks for your quick response.

I have created a slider on the first page to display information about the app. Followed by buttons to Login or Signup. Button click action results into the exception.

Sample code

app.js

import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {MomaPage} from './pages/moma/moma';
import {UserAuthPage} from './pages/login/login';
import {SignupPage} from './pages/-signup/-signup';
import {HomePage} from './pages/home/home';

@App({
  template: '<ion-nav swipeBackEnabled="true" id="app-nav" [root]="rootPage"></ion-nav>',
  config: {} 
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
 
  this.rootPage = MomaPage;

    this.platform = platform;
  this.initializeApp();
    
  }
  
  initializeApp() {
      this.platform.ready().then(() => {
        StatusBar.styleDefault();
      });
    }
}

Moma.html

<ion-navbar *navbar hideBackButton class="show-navbar">
  <ion-title>Welcome to  Moma</ion-title>
</ion-navbar>

<ion-content class="tutorial-page">
  <ion-slides pager>
    <ion-slide *ngFor="#slide of slides">
      <ion-toolbar>
        <ion-buttons end>
          <button >Skip</button>
        </ion-buttons>
      </ion-toolbar>
      <img [src]="slide.image" class="slide-image"/>
      <h2 class="slide-title" [innerHTML]="slide.title"></h2>
      <p [innerHTML]="slide.description"></p>
    </ion-slide>
    <ion-slide>
      <ion-toolbar>
      </ion-toolbar>
      <img src=“images/test.jpg" class="slide-image"/>
      <h2 class="slide-title">Ready to Play?</h2>
      <button large clear>
        Continue
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </ion-slide>
  </ion-slides>
  <ion-item>
<button (click)="signupUser()" full>New user Signup</button>
  </ion-item>

  <ion-item>
   <button (click)="authenticateUser()" full>Existing user, login here</button>
  </ion-item>
</ion-content>

moma.js

import {Page, NavController} from 'ionic-angular';
import {UserSignupPage} from '../signup/signup';
import {UserAuthPage} from '../authenticate/authenticate';
import {HomePage} from '../home/home';
@Page({
  templateUrl: './build/pages/moma/moma.html'
})
export class MomaPage {
  
  static get parameters() {
    return [[NavController]];
  }
  constructor(nav) {

 this.nav = nav;
 this.slides=[
      {
        title: "Welcome to the Moma!",
        description: “Moma",
        image: "images/3.jpeg",
      } 
//  Additional sample data…  
    ]
  }
  
  signupUser(){

 	this.nav.push(UserSignupPage);
  }
  authenticateUser(){
 	this.nav.push(UserAuthPage);
  }
  
}
5

@psbabu007 Unless I’m not missing something, the code looks OK. Maybe there’s a problems in any of the other pages. Could you post the source code of one or both of them as well?

6

Exactly the same issue.
goToApp() method fails with the same error message as @psbabu007 mentioned above.

My guess is that this.nav.push is the issue.

import {Page, Platform, Modal, NavController, NavParams} from 'ionic-angular';

import {GlobalVars} from '../../globals/GlobalVars';

import {RegisterModal} from '../register/register';
import {StatusBar} from 'ionic-native';

import {Tabs} from '../tabs/tabs'



@Page({
	templateUrl: 'build/pages/login/login.html'
})

export class LoginPage {

	static get parameters() {
	    return [[Platform],[GlobalVars],[NavController]];
	}


	constructor(platform, globalVars,nav) {

		console.log(nav)
		console.log("hej")

		this.platform=platform;
		this.nav=nav;

		this.globalVars=globalVars;

		this.platform.ready().then(() => {

			StatusBar.overlaysWebView(true);
			StatusBar.styleBlackTranslucent();
			StatusBar.hide();

			if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      
		      if(!ionic.Platform.isAndroid() ) {
		        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
		        cordova.plugins.Keyboard.disableScroll(true);
		        console.log("keyboardfix")
		      }


		      

		    }
			
		});

		this.loginText="Logga in";
		this.registerText="Ny användare";
		this.showLoginForm=false;

		this.goToApp=function(){
		  console.log("GO TO APP")
		  this.nav.push(Tabs, {});
		}

		this.formClass="visible";

		this.emailInput="";
		this.passwordInput=""; 

		this.loading=false;

		this.loggedInUser={}
		
	}

	goToRegistration(){

		var _this=this;

		setTimeout(function(){
			let modal = Modal.create(RegisterModal);
			_this.nav.present(modal)
	   	 },50)
		
	}

	attemptLogin(){

		this.loading=true;

		var _this = this;

		this.globalVars.loginRequest("test","test",
		function(res){
			console.log("success")

			_this.loading=false;

			_this.loggedInUser = res;
			if(!res.success){
				alert("Inloggningen misslyckades!");
			}
			else{
				alert("Inloggningen lyckades!");

				_this.goToApp();
			}
		},
		function(){
			alert("Inloggningen misslyckades!");
		})



	    
	}


}
7

Ok I solved it myself.
The issue was very simple.

Instead of
import {Tabs} from '../tabs/tabs'

I wrote
import {TabsPage} from '../tabs/tabs'

And it worked. This is because I called the class TabsPage and didnt realize that the import has to match exactly, thought of it more as a variable name. But now I know :smiley:

1 Like
8

@ivanliljeqvist I’m glad you figured it out.

Yes, you have to import using exactly the same identifier that you **export**ed before that:

// login.ts
// ...
import { TabsPage } from '../tabs/tabs';
// ...

// tabs.ts
// ...
export class TabsPage {
    // ...
}

@psbabu007 Are you still facing the problem or you already managed to solve it? Also check your imports and exports as well. And notice that you can’t import a class that you haven’t **export**ed before that.

9

Thanks @ivanliljeqvist & @iignatov
This solved the problem.

ionic team rocks :smile: