Getting blank page after Ionic Serve on the browser


#1

Hello there,

Iḿ trying make my own component on the Ionic 2, but after I put the tag on my home.html file and run Ionic Serve, I am getting a blank page in the browser without errors on the console. I read some topics about this, but didn’t found any solution.

This is my ionic info:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.8
Node Version: v7.4.0
Xcode version: Not installed

Any help is welcome! :slight_smile:

@EDIT:

So, here is some information:

The component iḿ trying to call (.ts):

import { Component } from ‘@angular/core’;

/*
Generated class for the MyComponent component.

See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
for more info on Angular 2 Components.
*/
@Component({
selector: ‘my-component’,
templateUrl: ‘my-component.html’
})
export class MyComponentComponent {

text: string;

constructor() {
console.log(‘Hello MyComponent Component’);
this.text = ‘Hello World’;
}

}

my-component.html, which is the template:

<div>
  <p> Iḿ trying call this </p>
</div>

My home.ts:

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { MyComponentComponent } from ‘…/…/components/my-component/my-component’

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

constructor(public navCtrl: NavController) {

}

}

My home.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>


  <ion-slides>

    <ion-slide>
        Hey there
        <my-component></my-component>
    </ion-slide>

    <ion-slide style="background-color: blue">
      <h2>Slide 2</h2>
    </ion-slide>
    
    <ion-slide style="background-color: red">
      <h2>Slide 3</h2>
    </ion-slide>

</ion-slides>


</ion-content>

This are my classes. Basicaly iḿ using standart templates from Ionic. I am trying to reproduce the example from this tutorial: https://www.joshmorony.com/custom-components-in-ionic-2/, but every time I add my tag on the Home.html file, as I said, I get a white page on the browser.


#2

You posted no details on what you are building and how you are building it. So all we can say is “I think there is an error in some of the things you created but didn’t post here”. I think you should add some more information we can actually look at.


#3

@Sujan12

Thanks for the reply. I already updated my post with my classes =D


#4

Is MyComponentComponent in both declarations and entryComponents of the app module?


#5

@rapropos
Thanks a lot rapopos!

I am shamed to say that, but I just added on the declarations and entryComponents and worked perfectly.
Would you know say why the browser gets blank when I dont do the declaration?


#6

I don’t use ionic serve very frequently, so I don’t know how robust its error reporting is. If your browser is Chrome-like, you might be able to see errors in the Developer Tools console. Other browsers probably have something similar.


#7

A post was split to a new topic: Follow the basic instructions