Ionic 2 Modal. Inline template - TypeError: Cannot read property 'items' of undefined

Ionic Framework ionic-v3
1

Hi guys,

I want to show a modal from my event page:

//event.html

  <ion-item>
    <ion-label floating>Title</ion-label>
    <ion-input formControlName="title" type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Sport</ion-label>
    <ion-select formControlName="sport">
      <ion-option value="Running">Running</ion-option>
      <ion-option value="Football">Football</ion-option>
      <ion-option value="Yoga">Yoga</ion-option>
      <ion-option value="Golf">Golf</ion-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-label>Début</ion-label>
    <ion-datetime displayFormat="DD MMM YYYY" formControlName="timeStarts"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>Où</ion-label>
    <ion-input formControlName="location" type="text" (click)="presentNewLocationModal()"></ion-input>
  </ion-item>

I implemented an event class as follows:

//event.ts    
constructor(public modalCtrl: ModalController, public formBuilder: FormBuilder) {
        // Creating the newEventForm and specifying controls
        this.newEventForm = this.formBuilder.group({
          title: ['', Validators.required],
          sport: ['', Validators.required],
          timeStarts: ['', Validators.required],
          location: ['', Validators.required]
        });
      }

      presentNewLocationModal() {
        let modal = this.modalCtrl.create(NewLocationModal);
        modal.present();
      }

And then wrote my modal.
View:


<ion-header>
  <ion-toolbar>
    <ion-title>
      Choisir un lieu
    </ion-title>
    <ion-buttons start>
      <button ion-button (click)="dismiss()">
        <span ion-text color="primary" showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android, windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
  Choisir un lieu
</ion-content>

Class:

import { Component } from '@angular/core';
import { Platform, NavParams, ViewController } from 'ionic-angular';

@Component({
  selector: 'modal-new-location',
  templateUrl: 'new-location-modal.html'
})
export class NewLocationModal {

  constructor(public platform: Platform, public viewCtrl: ViewController) {
    console.log('NewLocationModal#constructor');
  }

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

I get the following error when clicking the “où” input that presents the modal:

EXCEPTION: Error in ./NewLocationModal class NewLocationModal - inline template:22:14 caused by: Cannot read property 'items' of undefined

TypeError: Cannot read property 'items' of undefined
    at CompiledTemplate.proxyViewClass.View_NewLocationModal0.detectChangesInternal (/AppModule/NewLocationModal/component.ngfactory.js:363:46)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:117531:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:117726:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:8100/build/main.js:117516:18)
    at CompiledTemplate.proxyViewClass.View_NewLocationModal_Host0.detectChangesInternal (/AppModule/NewLocationModal/host.ngfactory.js:29:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:117531:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:117726:44)
    at ViewContainer.detectChangesInNestedViews (http://localhost:8100/build/main.js:117863:37)
    at CompiledTemplate.proxyViewClass.View_ModalCmp0.detectChangesInternal (/IonicModule/ModalCmp/component.ngfactory.js:46:14)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:117531:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:117726:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:8100/build/main.js:117516:18)
    at CompiledTemplate.proxyViewClass.View_ModalCmp_Host0.detectChangesInternal (/IonicModule/ModalCmp/host.ngfactory.js:30:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:117531:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:117726:44)

The constructor is called but somehow a part of the code tries to access an “items” variable that I don’t event use myself… any idea?

By the way I don’t understand why it is said “inline template” while I use a templateUrl…

2

I would guess that’s because Webpack inlines all your templates.

3

By the way, the bug is resolved in latest version as stated here