Error: Template parse errors: in Ionic 3 - ionic-framework

Question

When I run ionic serve i'm getting the following error below. Why I'm I getting the error? Does it have to do with IonicModule.forRoot(MyApp)?
This is my .html component:
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list inset>
<ion-item *ngFor="let bill of bills">
<h2>{{bill.bill_no}}</h2>
</ion-item>
</ion-list>
</ion-content>
bills.ts
import { Component } from '#angular/core';
import { IonicPage, IonicModule , NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '#angular/common/http';
import { Api } from '../../providers/api/api';
import { BillServiceProvider } from '../../providers/bill-service/bill-service';
/**
* Generated class for the BillsPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-bills',
templateUrl: 'bills.html',
})
export class BillsPage {
bills: any;
// constructor(public navCtrl: NavController, public navParams: NavParams) {
// }
constructor(public navCtrl: NavController, public BillServiceProvider: BillServiceProvider ) {
this.getBills();
// .subscribe(data => {
// console.log('my data: ', data);
// },
// ionViewDidLoad() {
// console.log('ionViewDidLoad BillsPage');
}
getBills() {
this.BillServiceProvider.getBills()
.then(data => {
this.bills = data;
console.log(this.bills);
});
}
// openDetails(bill){
// this.navCtrl.push('BillDetailsPage', {bill: bill});
// }
}
app.module.ts
import { BillsPage } from './../pages/bills/bills';
import { HttpClient, HttpClientModule } from '#angular/common/http';
import { ErrorHandler, NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { Camera } from '#ionic-native/camera';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { IonicStorageModule, Storage } from '#ionic/storage';
import { TranslateLoader, TranslateModule } from '#ngx-translate/core';
import { TranslateHttpLoader } from '#ngx-translate/http-loader';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { Items } from '../mocks/providers/items';
import { Settings, User, Api } from '../providers';
import { MyApp } from './app.component';
import { PaymentServiceProvider } from '../providers/payment-service/payment-service';
import { BillServiceProvider } from '../providers/bill-service/bill-service';
// The translate loader needs to know where to load i18n files
// in Ionic's static asset pipeline.
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
export function provideSettings(storage: Storage) {
/**
* The Settings provider takes a set of default settings for your app.
*
* You can add new settings options at any time. Once the settings are saved,
* these values will not overwrite the saved values (this can be done manually if desired).
*/
return new Settings(storage, {
option1: true,
option2: 'Ionitron J. Framework',
option3: '3',
option4: 'Hello'
});
}
#NgModule({
declarations: [
MyApp,
BillsPage
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
BillsPage
],
providers: [
Api,
Items,
User,
Camera,
SplashScreen,
StatusBar,
{ provide: Settings, useFactory: provideSettings, deps: [Storage] },
// Keep this to enable Ionic's runtime error handling during development
{ provide: ErrorHandler, useClass: IonicErrorHandler },
PaymentServiceProvider,
BillServiceProvider
]
})
export class AppModule { }