I am currently working on developing an Ionic app and in order to streamline my code, I have decided to separate certain elements into different modules and import them. However, I am facing an issue where I am receiving 'undefined' when trying to assign a static variable from one module to another.
I attempted to make the exported module static, so the manually created module.ts looks like this:
/*--------- Menu options ---------*/
export class AppPages {
public static pages = [
{
title: 'Inicio',
url: '/home',
icon: 'home',
detailTag: 'basicInfo'
},
// Other page objects here...
];
constructor(){}
}
In my home.page.ts file, for example, I tried to import it as follows:
import { AppPages } from '../global_modules/app_pages';
Then, inside the HomePage class, I create a variable like this:
public appPages;
The complete code of home.page.ts:
import { Component } from '@angular/core';
// other imports...
export class HomePage {
public appPages;
constructor(public toastController: ToastController){
this.appPages = AppPages.pages;
}
// Other functions and code blocks...
}
When I console.log the value of the appPages variable in the setup after assignment, I get the correct information (not undefined). However, when another function tries to access the content of that variable, it throws an error:
ERROR TypeError: Cannot read property 'appPages' of undefined at push../src/app/home/home.page.ts.HomePage.hideShowMenu (home.page.ts:144) // More error details...
Why is this variable 'not assigned' even though the console log shows the correct information? It seems there might be a scoping issue causing this error.