Component does not render when binding an attribute, no errors in console


So i walked through the ionic 2 setup guide and started to try and port across some old angular 1 directives. I copied the directive template across into a new angular 2 component and then added that component to my page1 page component. After doing this i just get a blank screen, even the tabs don’t work.

There is only this warning in the console

“Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator”

after a lot of debugging it seems to be caused bindings in an attribute of an element like this.

At first this object didn’t exist, i was expecting it to just show some binding errors in the console. But i mocked out the object and property and still get the same problem.

Anyone else having this problem? I also tried the newer attribute binding syntax but that didn’t help

My Component

import {Component} from "angular2/core";
    selector: 'carousel',
    templateUrl: 'build/views/components/carousel.tpl.html'
export class Carousel {
    carousel = {
        something: 'test'

Stripped down Component Template

<div class="carousel" data-something="{{carousel.something}}">     
<h1>This is a carousel</h1>


import {Page} from 'ionic-angular';
import {Carousel} from "../components/
  templateUrl: 'build/views/page1.html',
  directives: [Carousel]
export class Page1 {
  constructor() {

Page1 template

<ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>
<ion-content padding class="page1">
  <h2>Welcome to Ionic!</h2>
1 Like

Looks good…
StatusBar works only with cordova, and cordova works only on device ) So you can remove StatusBar from apps.ts or use condition.

I didn’t actually add that, it was part of the project template. I just tried commenting out the import line for StatusBar, the warning stopped but i just get a blank screen.

I think errors are bing swallowed because i can see an error in webstorm for this line


because StatusBar no longer exists. It still seems to build and reload but no errors in the console. Even with that line commented out its the same

Hmm, i got the same problem just by having a closing div without a matching opening div

<!--<div class="carousel" data-something="{{carousel.something}}">-->

I have the same problem. Any solution?

What is this bit intended to do? It’s what’s causing your whitescreen, because nothing is handling attempts to bind to a property identified by “data-something”, so I expect the template parser is puking at that point.

That was just a test to try and figure out the cause of the problem. But we have a similar bit of angular 1.x code that adds some additional data to the element so it can be picked up by selenium tests.

I know theirs a new syntax for this sort of binding, i haven’t really tied that to much, i was more concerned with the lack of errors to help guide me to the source of the problem. As i posted in my last response i also had the same lack of errors when i had a closing div element without an opening one.

The errors exist. When you’re dealing with Promises, if you handle them overly optimistically, errors will get swallowed up.

Personally i hate that about promises and im aware of the problem, its one sure way to have a bug go unknown is when the tools you use make everything look peachy. But that’s a separate issue and in this very simple test i’m not even using promises. Are you saying that the framework itself is and somehow they errors from the rejected promises are not being logged to the console?

I suspect this is an ionic issue because i have also tried the exact same test in an Angular 2 project but it does give me the errors i was expecting. Before i logged the issue i tested the latest Angular 2 by itself and got errors as expected. I then updated the ionic 2 project to the latest version of Angular 2 but still no errors

@nitro52 If you’re on Mac OS X take a look at the following issue because it seems related:

1 Like