Ionic 5 & Phaser 3

Hi there,
i want to develop a game with Ionic and Phaser.
I downloaded the phaser.js and imported it in the index.html

<script src="assets/phaser.js"></script>

in my home.page.html i got:

<ion-content>
  <div id="phaser-example"></div>
</ion-content>

Here is my home.page.ts

When i run it with ionic serve i can see i the web console that is has an error:
ERROR TypeError: “game.load is undefined”

I just want to start to add a text or an image to my game.

Can please someone help to get started?
Thank you :smiley:

Someone has any idea?

Thank you very much! :slight_smile:

  1. remove <script src="assets/phaser.js"></script> in index.html
  2. in root folder: angular.json, search "scripts": [], add your js file.
    eg: "scripts": ["src/phaser.min.js"]
  3. restart ng serve, ‘phaser’ should work.

Hi,

i tried this, but i still got this error:
ERROR TypeError: "game.load is undefined"

I dont know what to do :thinking:

Whether or not it solves your problem

Game should be declared as member of the class and not at the global level

Then address it through this.game

hi @Treeman92 any luck with your finding so far?
I’m having the same problem setting up Phaser 3 for Ionic 4/5 too. I’ve been searching for few days now, and found no clue about how to proceed.

I tried both compile-time & runtime integration (same as your solution), but I couldn’t get any far and I also have the same “this.game.load is not a function” problem.

Please advise.

Has there been a resolution to this? Oddly enough, I just started trying to get Phaser 3 and Ionic 5 to integrate and I am getting the exact same error…the Phaser Discord has not yet responded with whether these 2 even play nice together…

I think I was able to solve this after some experimenting and researching.

Once you have generated your project and run npm i phaser, you have to add a line to the scripts array in angular.json

"scripts": [
    "node_modules/phaser/dist/phaser.min.js"
]

then you need to modify your tsconfig.json file to include the ScriptHost library

"lib": [
    "es2018",
    "dom",
    "scripthost" //add this
],

then the final addition should be to add a line at the very end of the polyfills.ts file to avoid an ActiveX bug

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
(window as any)['global'] = window;

with these changes implemented i was able to get Phaser 3 working with Ionic! Let me know if this works!

Thank you @jjdev, it worked perfectly for me, after hours of researches :+1: :pray: