Ionic app does not display anything - node.js

Question

I have built a simple ionic app based on the following tutorial: Building a Review app with Ionic 2, MongoDB and Node by Josh Moroney. Whenever I execute the ionic serve command, the app runs in the browser, with no errors, but it displays nothing. Not even the UI elements of the app, just a plain blank screen.
Below are my codes - app.module.ts
import { NgModule } from '#angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AddReviewPage } from '../pages/add-review/add-review'
import { ReviewsProvider } from '../providers/reviews/reviews';
#NgModule({
declarations: [
MyApp,
HomePage,
AddReviewPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
AddReviewPage
],
providers: [
ReviewsProvider
]
})
export class AppModule {}
Provider - reviews.ts
import { HttpClient, HttpHeaders } from '#angular/common/http';
import { Injectable } from '#angular/core';
import 'rxjs/add/operator/map';
/*
Generated class for the ReviewsProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
#Injectable()
export class ReviewsProvider {
data: any;
constructor(public http: HttpClient) {
this.data = null;
}
getReviews(){
if (this.data) {
return Promise.resolve(this.data);
}
return new Promise(resolve => {
this.http.get('http://localhost:8080/api/reviews')
.map(res => res)
.subscribe(data => {
this.data = data;
resolve(this.data);
});
});
}
createReview(review){
let headers = new HttpHeaders();
headers.append('Content-Type', 'application/json');
this.http.post('http://localhost:8080/api/reviews', JSON.stringify(review), {headers: headers})
.subscribe(res =>
console.log(res));
}
deleteReview(id){
this.http.delete('http://localhost:8080/api/reviews/' + id).subscribe((res) =>
console.log(res));
}
}
Pages -> add-review.html
<ion-header>
<ion-toolbar transparent>
<ion-title>Add Review</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list no-lines>
<ion-item>
<ion-label floating>Title</ion-label>
<ion-input [(ngModel)]="title" type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Review</ion-label>
<ion-textarea [(ngModel)]="description"></ion-textarea>
</ion-item>
<ion-item>
<ion-range min="0" max="100" pin="true" [(ngModel)]="rating">
<ion-icon range-left name="sad"></ion-icon>
<ion-icon range-right name="happy"></ion-icon>
</ion-range>
</ion-item>
</ion-list>
<button ion-button full color="secondary" (click)="save()">Save</button>
</ion-content>
add-review.ts
import { Component } from '#angular/core';
import { ViewController } from 'ionic-angular';
/**
* Generated class for the AddReviewPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-add-review',
templateUrl: 'add-review.html',
})
export class AddReviewPage {
title: any;
description: any;
rating: any;
constructor(public viewCtrl: ViewController) {
}
save(): void {
let review = {
title: this.title,
description: this.description,
rating: this.rating
};
this.viewCtrl.dismiss(review);
}
close(): void {
this.viewCtrl.dismiss();
}
ionViewDidLoad() {
console.log('ionViewDidLoad AddReviewPage');
}
}
Home page -> home.html
<ion-header>
<ion-navbar transparent>
<ion-title>
Review King
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="addReview()"><ion-icon name="add"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list no-lines>
<ion-item-sliding *ngFor="let review of reviews">
<ion-item>
<ion-avatar item-left>
<img src="https://api.adorable.io/avatars/75/{{review.title}}">
</ion-avatar>
<h2>{{review.title}}</h2>
<p>{{review.description}}</p>
<ion-icon *ngIf="review.rating < 50" danger name="sad"></ion-icon>
<ion-icon *ngIf="review.rating >= 50" secondary name="happy"></ion-icon>
{{review.rating}}
</ion-item>
<ion-item-options>
<button ion-button color="danger" (click)="deleteReview(review)">
<ion-icon name="trash"></ion-icon>
Delete
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
home.ts
import { Component } from '#angular/core';
import { NavController, ModalController } from 'ionic-angular';
import { AddReviewPage } from '../add-review/add-review';
import { ReviewsProvider } from '../../providers/reviews/reviews';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
reviews : any;
constructor(public navCtrl: NavController, public reviewService: ReviewsProvider, public modalCtrl: ModalController) {
}
ionViewDidLoad(){
this.reviewService.getReviews().then((data) => {
console.log(data);
this.reviews = data;
});
}
addReview(){
let modal = this.modalCtrl.create(AddReviewPage);
modal.onDidDismiss(review => {
if(review){
this.reviews.push(review);
this.reviewService.createReview(review);
}
});
modal.present();
}
deleteReview(review){
//Remove locally
let index = this.reviews.indexOf(review);
if(index > -1){
this.reviews.splice(index, 1);
}
//Remove from database
this.reviewService.deleteReview(review._id);
}
}
I was unable to figure out what I had been doing wrong. Can anyone please point it out? Is it a problem with my view pages, or the configuration in app.module.ts?

Answer 1

Please ensure that there is a rootPage set in your app.component.ts page.
If not, insert the following into the class
rootPage: any = HomePage;