Ionic 2 custom component ion-item gives TypeError: viewFactory_Item0 is not a function

Ionic Framework ionic-v3
1

I’m developing my first Ionic 2 custom component, included in a page in a tab, and mostly it’s working, but when I add an ion-item to the template, it crashes with the exception below.

The entire template is:

<ion-list><ion-item>xxx</ion-item></ion-list>

List is OK, Item is not. The following does NOT give the exception:

<ion-list>xxx</ion-list>

Does anyone have an idea how to include ion-item in my component?
Also, other things such as ion-icon don’t display and buttons are not styled.

The code for this component is what I’ve gathered from other posts:

import {Component, Input} from 'angular2/core';
import {IONIC_DIRECTIVES} from 'ionic-framework/ionic';

@Component({
	selector: 'person-status',
  templateUrl: 'build/components/person-status/person-status.html',
  directives: [IONIC_DIRECTIVES];
})
export class PersonStatusComponent {
	@Input() person;
  constructor() {
  }
}

The exception is:

[Error] EXCEPTION: TypeError: viewFactory_Item0 is not a function. (In 'viewFactory_Item0', 'viewFactory_Item0' is null)

[Error] STACKTRACE:
[Error] viewFactory_PersonStatusComponent0
viewFactory_RespondersScreen0
viewFactory_HostRespondersScreen0
createHostViewInContainer@http://localhost:8100/build/js/app.bundle.js:19905:48
createHostView@http://localhost:8100/build/js/app.bundle.js:19295:45
http://localhost:8100/build/js/app.bundle.js:48136:60
run@http://localhost:8100/build/js/app.bundle.js:1183:23
http://localhost:8100/build/js/app.bundle.js:17492:48
zoneBoundFn@http://localhost:8100/build/js/app.bundle.js:1156:23
lib$es6$promise$$internal$$tryCatch@http://localhost:8100/build/js/app.bundle.js:2556:25
lib$es6$promise$$internal$$invokeCallback@http://localhost:8100/build/js/app.bundle.js:2568:53
lib$es6$promise$$internal$$publish@http://localhost:8100/build/js/app.bundle.js:2539:53
http://localhost:8100/build/js/app.bundle.js:1288:8
microtask@http://localhost:8100/build/js/app.bundle.js:17532:32
run@http://localhost:8100/build/js/app.bundle.js:1183:23
http://localhost:8100/build/js/app.bundle.js:17492:48
zoneBoundFn@http://localhost:8100/build/js/app.bundle.js:1156:23
lib$es6$promise$asap$$flush@http://localhost:8100/build/js/app.bundle.js:2350:18
2

For those poor sods who have this problem, I eventually discovered the solution. Don’t have a list/item in a component if that component is inside a list in the parent page.

Moving the component outside the parent page list fixed the exception and fixed the styling and layout of icons and columns in the component.

Having an obscure exception and non-functioning app just because of nested lists… is a poor way to learn Ionic 2!