Error in IONIC 4: Unable to retrieve property 'get' as it is undefined

Question

Error in IONIC 4: Unable to retrieve property 'get' as it is undefined

I am attempting to retrieve data from the database using the get() function, but I keep encountering an error with the title:

at HomeTabPage.push ../src/app/home-tab/home-tab.page.ts.HomeTabPage.ngOnInit (home-tab.page.ts: 18)

Even after trying to use the Elvis operator with *ngFor, I still cannot get it to work. I have moved my main function out of ngOnInit and created a new function for reference, but that also did not solve the issue.

home-tab.page.html

<ion-list >
    <ion-item *ngFor="let advert of advertList">
        <ion-thumbnail slot="start">
           <ion-img src="advert?.image"></ion-img>
         </ion-thumbnail>
         <ion-label>
           <h2 >{{advert?.name}}</h2>
           <h3 >{{advert?.price}}</h3>
           <p >{{advert?.description}}</p>
        </ion-label>
     </ion-item>
  </ion-list>

home-tab.page.ts

export class HomeTabPage implements OnInit {
  public advertList: Array<any>;

  constructor(private navCtrl: NavController, public adService: AdvertisingService) {}

  ngOnInit(){
    this.adService.getAdAllList().get().then(advertListSnapshot => {
      this.advertList = [];
      advertListSnapshot.forEach(snap =>{
        this.advertList.push({
          id: snap.id,
          name: snap.data().name,
          price: snap.data().price,
          description: snap.data().description,
          image: snap.data().picture
        });
      });
    });
  }
}

service.ts

export class AdvertisingService {
  public adAllListRef: firebase.firestore.CollectionReference;
  constructor() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.adAllListRef = firebase.firestore().collection(`/adverts/adAll/adList`);
      }
    });
  }

  //cRud -> Read
  getAdAllList(): firebase.firestore.CollectionReference {
    return this.adAllListRef;
  }
}

ERROR

HomeTabPage_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'get' of undefined
    at HomeTabPage.push../src/app/home-tab/home-tab.page.ts.HomeTabPage.ngOnInit (home-tab.page.ts:18)
    at checkAndUpdateDirectiveInline (core.js:22099)
    at checkAndUpdateNodeInline (core.js:23363)
    at checkAndUpdateNode (core.js:23325)
    at debugCheckAndUpdateNode (core.js:23959)
    at debugCheckDirectivesFn (core.js:23919)
    at Object.eval [as updateDirectives] (HomeTabPage_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)
    at checkAndUpdateView (core.js:23307)
    at callViewAction (core.js:23548)

ERROR

angular typescript ionic-framework ionic4

Answer 1

Answer №1

Hey, there's a specific scenario that your current code doesn't handle. What if user is undefined in the function

firebase.auth().onAuthStateChanged

? In such a situation, your this.adAllListRef won't get initialized, leading to the same error occurring.

I may not have a ready-to-use code solution for you, but I can guide you on how to tackle this issue:

Given that this page functions properly only when user is valid, consider implementing an AuthGuard, similar to the following example:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, Route } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private _router: Router,private _advSvc: AdvertisingService) {
  }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> 
  {
    return new Promise((resolve) => {
      firebase.auth().onAuthStateChanged(user => {
         if (user) {
            resolve(true);
         } else{
           this._router.navigate(['/login']);
           resolve(false);
         }
      });
   }
}

In the AdvertisingService, you won't need to check for user because it will only be accessed after validation by the AuthGuard.

export class AdvertisingService {
  constructor() {
  }

  getAdAllList(): firebase.firestore.CollectionReference {
    return firebase.firestore().collection(`/adverts/adAll/adList`);
  }
}

Make sure to define the router as follows:

  const route = [
    { .... },
    {path: '/home',component: HomeTabPage, canActivate: [AuthGuard] },
    {path: '/login',component: LoginPage }
  ]

Answer 2

Hey, there's a specific scenario that your current code doesn't handle. What if user is undefined in the function

firebase.auth().onAuthStateChanged

? In such a situation, your this.adAllListRef won't get initialized, leading to the same error occurring.

I may not have a ready-to-use code solution for you, but I can guide you on how to tackle this issue:

Given that this page functions properly only when user is valid, consider implementing an AuthGuard, similar to the following example:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, Route } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private _router: Router,private _advSvc: AdvertisingService) {
  }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> 
  {
    return new Promise((resolve) => {
      firebase.auth().onAuthStateChanged(user => {
         if (user) {
            resolve(true);
         } else{
           this._router.navigate(['/login']);
           resolve(false);
         }
      });
   }
}

In the AdvertisingService, you won't need to check for user because it will only be accessed after validation by the AuthGuard.

export class AdvertisingService {
  constructor() {
  }

  getAdAllList(): firebase.firestore.CollectionReference {
    return firebase.firestore().collection(`/adverts/adAll/adList`);
  }
}

Make sure to define the router as follows:

  const route = [
    { .... },
    {path: '/home',component: HomeTabPage, canActivate: [AuthGuard] },
    {path: '/login',component: LoginPage }
  ]

Error in IONIC 4: Unable to retrieve property 'get' as it is undefined

Answer №1

Similar questions

What could be causing the callback function to malfunction when setting markers in the Leaflet library for Android?

Creating a TypeScript definition file that exports a class after instantiation

JavaScript => Compare elements in an array based on their respective dates

Storing geolocation information in local variables for future use

Angular: Inject all dependencies into a component's class

Assigning dynamic key value pairs in Angular 4 using Typescript

Angular 4 scatter chart with multiple data points using Google charts

Is there a TypeScript alternative to triggering a click event on a specific class using $(".class").click()?

Function cannot be invoked within FB.api() in Angular framework

Typescript - neglecting a package that lacks typings

The click event in an Angular 6 loop is not being activated

How can Angular be used to retrieve JSON data from a server-side PHP file?

Set the default value for a form control in a select dropdown using Angular

Inhibit unselected choices when a user exceeds choosing a certain number of options

Dealing with extensive fixtures in Cypress

How can I set up the default keyboard control for Google's Model Viewer?

What is the best way to combine async/await with a custom Promise class implementation?

Ways to limit the type based on the value of the argument

Utilizing proxies and leveraging the power of the Map collection in tandem

What is the best way to trigger a Redux Toolkit action within a React Router DOM action?