I've encountered an error while trying to develop an application. The error message reads "Unable to get property 'get' of undefined or null reference at ProfilePage.prototype.ngOnInit".
My framework of choice is Ionic 4. This error specifically occurs when transitioning from the home page to the profile page.
HomePage.html:
<ion-header>
<ion-toolbar>
<ion-title>Home</ion-title>
<ion-buttons slot="end">
<ion-button routerLink="/profile">
<ion-icon slot="icon-only" name="person"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
profile.page.ts
import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { AuthService } from '../../services/user/auth.service';
import { ProfileService } from '../../services/user/profile.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-profile',
templateUrl: './profile.page.html',
styleUrls: ['./profile.page.scss']
})
export class ProfilePage implements OnInit {
public userProfile: any;
public birthDate: Date;
constructor(
private alertCtrl: AlertController,
private authService: AuthService,
private profileService: ProfileService,
private router: Router
) {}
ngOnInit() {
this.profileService
.getUserProfile()
.get()
.then(userProfileSnapshot => {
this.userProfile = userProfileSnapshot.data();
this.birthDate = userProfileSnapshot.data().birthDate;
});
}
......
Homepage.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {
constructor() { }
ngOnInit() {}
}
The intention of the code is to enable users to navigate to the profile page. However, it resulted in the error message: "Unable to get property 'get' of undefined or null reference at ProfilePage.prototype.ngOnInit".