Unhandled Promise rejection: Template parse errors:

Ionic Framework ionic-v3
1

I am using Ionic 2 trying to get Firebase to work based on this tutorial but with Ionic rc4. Any help appreciated.

Your system information:

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed

There are no compile errors, but I get the following run-time error:

Unhandled Promise rejection: Template parse errors:
'h7' is not a known element:
1. If 'h7' is an Angular component, then verify that it is part of this module.
2. If 'h7' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
      </h2>
      <p class="chat-text">{{item.chat_text}}</p>
      [ERROR ->]<h7 class="chat-time">{{item.timestamp | date:'dd/MM/yyyy'}}</h7>
    </ion-item>
  </ion-list>
"): HomePage@23:6 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
'h7' is not a known element:
1. If 'h7' is an Angular component, then verify that it is part of this module.
2. If 'h7' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
      </h2>
      <p class="chat-text">{{item.chat_text}}</p>
      [ERROR ->]<h7 class="chat-time">{{item.timestamp | date:'dd/MM/yyyy'}}</h7>
    </ion-item>
  </ion-list>
"): HomePage@23:6
Stack trace:
TemplateParser</TemplateParser.prototype.parse@http://localhost:8100/build/main.js:20796:19
RuntimeCompiler</RuntimeCompiler.prototype._compileTemplate@http://localhost:8100/build/main.js:45698:30
RuntimeCompiler</RuntimeCompiler.prototype._compileComponents/<@http://localhost:8100/build/main.js:45618:56

It seems to be referencing HomePage, but I am not sure if it has any errors.
home.ts

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {LoginPage} from '../login/login';
import {
  FirebaseAuth,
  AngularFire,
  FirebaseListObservable
} from 'angularfire2';


@Component({
  templateUrl: 'home.html'
})
export class HomePage {
  firelist: FirebaseListObservable<any>;
  chat: any;
  constructor(public nav: NavController, public af: AngularFire, public auth: FirebaseAuth) {
    this.firelist = this.af.database.list('/chat', { //mengambil data
      query: {
        orderByChild: 'negativtimestamp', //order dari data yang terbaru
      }
    });
  }

  chatSend(va, vi) { //mengirim pesan chat
    this.af.database.list('/chat').push({ // menambahkan data chat ke firebase
      uid: window.localStorage.getItem('uid'),
      img: window.localStorage.getItem('photoURL'),
      username: window.localStorage.getItem('displayName'),
      chat_text: va.chatText,
      timestamp: Date.now(),
      negativtimestamp: -Date.now() //buat nanti ambil data yang terbaru
    })
    this.chat = '';
  }

  logout() { // melakukan logout
    window.localStorage.removeItem('email'); // remove email dari localStorage
    window.localStorage.removeItem('uid'); // remove uid dari localStorage
    window.localStorage.removeItem('displayName'); // remove displayName dari localStorage
    this.auth.logout();
    this.nav.setRoot(LoginPage);// kembali ke halaman LoginPage
  }

}
2

It was an html error

<h7>

Change it to

<h3>

3

I think HTML headings only go up to <h6>. The error message is complaining about an <h7>.

1 Like