Hey all, just started messing around with Ionic 2. Just ran into an issue…
I’m trying to pop a modal from my second tab. I get the error pictured below. My button press is registered, but errors out. Both modal-page and page2 files are in separate folders within the pages directory. Any tips? Thanks!
browser_adapter.js:86 EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: TypeError: Cannot read property ‘annotations’ of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property ‘annotations’ of undefined
** at ReflectionCapabilities.annotations (http://localhost:8100/build/js/app.bundle.js:29528:40)**
** at Reflector.annotations (http://localhost:8100/build/js/app.bundle.js:29700:48)**
** at DirectiveResolver.resolve (http://localhost:8100/build/js/app.bundle.js:6732:44)**
** at CompileMetadataResolver.getDirectiveMetadata (http://localhost:8100/build/js/app.bundle.js:10655:51)**
** at RuntimeCompiler.resolveComponent (http://localhost:8100/build/js/app.bundle.js:14572:47)**
** at DynamicComponentLoader_.loadNextToLocation (http://localhost:8100/build/js/app.bundle.js:25288:31)**
** at ModalComponent.ngAfterViewInit (http://localhost:8100/build/js/app.bundle.js:46263:22)**
** at DebugAppView._View_ModalComponent_Host0.detectChangesInternal (ModalComponent_Host.template.js:32:75)**
** at DebugAppView.AppView.detectChanges (http://localhost:8100/build/js/app.bundle.js:25896:14)**
** at DebugAppView.detectChanges (http://localhost:8100/build/js/app.bundle.js:25985:44)**
ERROR CONTEXT:
[object Object]
page2.html
<ion-navbar *navbar>
<ion-title>
Tab 2
</ion-title>
</ion-navbar>
<ion-content class="page2">
<button ion-item (click)="openModal()">Add New Item...</button>
</ion-content>
page2.ts
import {Modal, NavController, Page} from 'ionic-angular';
import {ModalPage} from '../modal-page/modal-page';
@Page({
templateUrl: 'build/pages/page2/page2.html',
})
export class Page2 {
constructor(nav: NavController){
this.nav = nav;
}
openModal() {
let modal = Modal.create(ModalPage);
this.nav.present(modal);
}
}
modal-page.ts
import {Page, NavController, ViewController} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/modal-page/modal-page.html',
})
export class ExerciseModalPage {
constructor(viewCtrl : ViewController) {
this.viewCtrl = viewCtrl;
}
dismiss() {
this.viewCtrl.dismiss();
}
}