Adding simple Component to Ionic2 Page

Ionic Framework ionic-v3
1

I am trying to do something really fundamental - add a custom component to ionic page. Entire code looks like below:

import {Page} from 'ionic-angular';
import {PropositionCard} from './PropositionCard';

@Page({
  templateUrl: 'build/pages/swipe-page/swipe-page.html',
  directives: [PropositionCard]
})
export class SwipePage {  
}

inside the same directory in PropositionCard.ts:

import { Component } from 'angular2/core';

@Component({
  selector: 'proposition-card',
  template: `<span>hello</span>`
})
export class PropositionCard {
}

and in the swipe-page.html:

<ion-navbar *navbar>
  <ion-title>swipePage</ion-title>
</ion-navbar>

<ion-content padding class="swipe-page">
  <proposition-card>
</ion-content>

That’s all. Something really fundamental. When I run this code with ionic serve -c -s I’m getting “white wall” in web browser. When I open chrome console all I see is:

(index):28 Uncaught TypeError: Cannot read property 'btn' of null http://localhost:8100/build/js/app.bundle.js Line: 58239

When I remove <proposition-card> from swipe-page.html everything works fine (of course this component is not displayed).

Is there anything wrong here? I’m running it with:

"angular2": "2.0.0-beta.15",
"ionic-angular": "2.0.0-beta.6",
"ionic-native": "^1.1.0",
2

I believe custom HTML elements must be properly closed. You’re missing </proposition-card>.

3

Yes, you are absolutely right. Thank you. It was an unclosed HTML element… :confounded:

By the way, is there any way to make Ionic more expressive? It’s quite an often situation when I do something wrong and instead of any explanatory error message, all I see is

(index):28 Uncaught TypeError: Cannot read property 'btn' of null http://localhost:8100/build/js/app.bundle.js

when I open chrome console. I’m running it with ionic serve -c -s and nothing else than message above appears on console.