Using Phaser v3 within the Ionic framework to create a blank screen

I followed a tutorial to create a Phaser game: https://www.youtube.com/watch?v=W43SoPeNctQ

However, I'm facing an issue where the canvas briefly appears when the page reloads, but then disappears, leaving only a white screen with the header bar and tabs visible on top and bottom.

No errors are showing in the console.

I am using Phaser v3.24.1, just like in the video, and my browser is Brave, based on Chromium.

When running "ionic info", I see the following:

Ionic:

   Ionic CLI                     : 6.12.3 (C:\Users\myuser\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.5
   @angular-devkit/build-angular : 0.1102.10
   @angular-devkit/schematics    : 11.2.10
   @angular/cli                  : 11.2.10
   @ionic/angular-toolkit        : 3.1.1

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.15.4 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.10
   OS     : Windows 10

And when running "ng version", I see the following:

Angular CLI: 11.2.10
Node: 14.15.4
OS: win32 x64

Angular: 11.2.11
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.10
@angular-devkit/build-angular   0.1102.10
@angular-devkit/core            11.2.10
@angular-devkit/schematics      11.2.10
@angular/cli                    11.2.10
@schematics/angular             11.2.10
@schematics/update              0.1102.10
rxjs                            6.6.7
typescript                      4.0.7

If anyone has any suggestions or can help troubleshoot this issue, it would be greatly appreciated!

Answer №1

After some trial and error, I discovered that the key to resolving the issue was moving the phaser initialization method call from the constructor to ionViewDidEnter().

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing Array Object into a different Array Object (with Angular)

I am dealing with an array Object [ { product: "Product A", inStock: 3, onHold: 1, soldOut: 2 }, { product: "Product B", inStock: 2, onHold: 0, soldOut: 1 }] I am struggling to convert it into the new array format below. Any assista ...

Create a custom data structure resembling a record, where certain keys are assigned specific value types

My objective is to establish a custom type resembling a record, where certain keys are designated for specific value types. The proposed object would look something like this: const o: TRec = { text: "abc", width: 123, height: 456, //...an ...

Exploring the world of audio playback in TypeScript/JavaScript and Electron using setInterval

I am currently developing a metronome using electron, and I am playing the audio through howler. When the window is active on the screen, the audio plays correctly. However, when I minimize the window, the audio starts to play at incorrect intervals causi ...

Tracking user session duration on a React Native app can be achieved by implementing a feature that monitors and

I'm currently focusing on tracking the amount of time a user spends on the app in minutes and hours, and displaying this information. I have successfully implemented the functionality to count minutes, but I am struggling to figure out how to track wh ...

Error encountered during npm installation - EPERM: Operation not allowed

Today's challenge began when attempting to run the angular4 project and encountering this error: npm install eperm operation not permitted. In an effort to resolve it, I decided to delete the node modules folder and try again. However, upon running np ...

Exploring the module and module resolution options in the TypeScript compiler

It seems that many tsconfig.json examples include the compilerOptions section with entries like this: "module": "commonjs", "moduleResolution": "node" Setting both values to commonjs and node respectively may seem r ...

The browser does not store cookies in its memory

After conducting extensive research on this issue, I have not been able to find a solution yet. In essence, I am currently running a Node.js API server on localhost:3000 and an Angular 10 app on localhost:4200. The problem is straightforward - when I make ...

Error code TS7053 occurs when an element implicitly has an 'any' type because a string expression cannot be used to index an empty object

I have implemented a code snippet that sorts items into groups based on their first character. For example, if the array of item looks like this: {name: 'Foo'} {name: 'Bar'} {name: 'Baz'} The expected result should be: B: ...

Generate a new document and input information using the ionic framework

I'm currently working on an application for mapping purposes. I have generated KML and JSON strings that need to be stored in files within the phone's memory. To achieve this, I implemented the following code: var fileObject; document.addEve ...

Struggling to use the bind method for the loadScene callback function in cocosCreator or cocos2d-x?

When the loadScene() callback function is bound, the information retrieved from getScene() becomes inaccurate. Upon transitioning from the Entry Scene to the Lobby Scene, I perform post-processing tasks. The implementation was done in TypeScript. Entry. ...

Mastering the art of shaping state in NGRX for the master-detail pattern

Imagine a scenario where I am developing a compact app for organizing tasks. This app makes use of angular and NGRX to efficiently manage the state. Each day, the user loads tasks in the morning and then travels to different locations to complete them. Th ...

Exploring the process of retrieving token expiration in TypeScript using the 'jsonwebtoken' library

Currently utilizing jsonwebtoken for token decoding purposes and attempting to retrieve the expiration date. Encountering TypeScript errors related to the exp property, unsure of the solution: import jwt from 'jsonwebtoken' const tokenBase64 = ...

Enhance User Experience - Automatically highlight the first element in Prime NG Menu when activated

I have been working on transitioning the focus from the PrimeNG menu to the first element in the list when the menu is toggled. Here is what I've come up with: In my template, I added: <p-menu appendTo="body" #menu [popup]="true&quo ...

Using a PNG image served from a Node.js server presents challenges when trying to use it as a marker in an Ionic

Currently, all of my images are being loaded from the server URL. This is how it looks in HTML: <img [src]="http://myserverurl.../image.png" /> Everything is working fine and I can see the images on the profiles. However, I am also using t ...

Can someone guide me on configuring Material-UI DataGrid in React to have multiple headers with column span?

Is there a way to achieve multiple headers with column span in the Material-UI DataGrid component? view image example ...

In Typescript, which kind of event is suitable for MouseEvent<HTMLDivElement>?

My goal is to close the modal when clicking outside the div element. Take a look at my code below. // The onClose function is a setState(false) function. import { useRef, useEffect } from 'hooks' import { MouseEvent } from 'react' imp ...

The issue of TypeScript conditional property failure when using Omit functionality

After defining a baseProps type, I discovered that I can successfully execute prop.onHotSave() if prop.hotSave is true when using this type directly. However, the scenario changes when I create a new prop using Omit; the previous functionality no longer f ...

Designing architecture for NPM packages in TypeScript

I am currently developing multiple NPM packages using TypeScript and I am exploring the most effective strategies for supporting various target architectures. When compiling to ES3, there is extensive support but it comes with additional boilerplate for c ...

Creating a simple unit test for an angular "provider" functionality

I am currently in the process of setting up a basic unit test for my Angular application, specifically an Ionic application. Utilizing a preconfigured solution by the Ionic team with karma/jasmine, the provided sample unit tests passed successfully. Encour ...

Holding off on completing a task until the outcomes of two parallel API requests are received

Upon page load, I have two asynchronous API calls that need to be completed before I can calculate the percentage change of their returned values. To ensure both APIs have been called successfully and the total variables are populated, I am currently using ...