Update project from phaser 2 to phaser 3

Phaser 3
1

I am trying to put all my phaser 3 games into one ionic 4 application. I found the following example which works perfectly for phaser 2 (https://store.enappd.com/product/ionic-phaser-game-framework-ionic-4/). however when I try to update to phaser three the screen goes blank. I imagine one of the problems is to do with how scenes have replaced states. does anyone have any ideas how to get around this or is this example workable anymore??

below is some code

 export class HomePage {

   constructor(private menuCtrl: MenuController) {
     game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'space- 
     invaders',
       { preload: this.preload, create: this.create, update: this.update, render: this.render });

       that = Object.create(this.constructor.prototype);

   }

    preload() {
        this.load.image('bullet', 'assets/phaser/bullet.png');
        game.load.image('enemyBullet', 'assets/phaser/enemy-bullet.png');
    }
 }

game.load works for phaser 2, if I use this.load in ionic it throws the following error ‘Property ‘load’ does not exist on type ‘HomePage’.’

With these changes to phaser is this method even possible??

2

I am currently updating a game from Phaser 2 to Phaser 3 and I noticed that the entire project structure has changed. if your homepage is a scene, you’re going to need to define it as

class HomePage extends Phaser.Scene {
	constructor() {
		super("homePage");
	}
	create() {
	}
	update() {
	}
}

for me game.js is a separate file entirely, which contains all the configs.
game.load is not really a thing anymore either, it’s this.load instead. You can have that in a separate preloader scene or load assets for each level. I recommend the former.

Check out these links for a list of things which are done completely differently in Phaser 3 compared to Phaser 2