Angular and Phaser

Neil Haddley • May 10, 2023

Using Phaser in an Angular Component

AngularTypeScriptphasergame-devcanvas
← Back to Posts

Highlights

BASH
1% npm i -g @angular/cli
2% ng new haddley-angular-phaser
3% cd haddley-angular-phaser
4% npm i phaser
5% code .
6% ng generate component bounce

I updated angular.json:

JSON
1"scripts": ["node_modules/phaser/dist/phaser.min.js"]
I ran ng new haddley-angular-phaserTap the image to open it full size

I ran ng new haddley-angular-phaser

I installed phaser with npmTap the image to open it full size

I installed phaser with npm

I generated the bounce componentTap the image to open it full size

I generated the bounce component

I updated angular.json with "scripts": ["node_modules/phaser/dist/phaser.min.js"]Tap the image to open it full size

I updated angular.json with "scripts": ["node_modules/phaser/dist/phaser.min.js"]

I uploaded files to the /src/assets folderTap the image to open it full size

I uploaded files to the /src/assets folder

I added a routeTap the image to open it full size

I added a route

I removed unnecessary htmlTap the image to open it full size

I removed unnecessary html

I enabled allowSyntheticDefaultImportsTap the image to open it full size

I enabled allowSyntheticDefaultImports

I added scripthostTap the image to open it full size

I added scripthost

I encountered a VideoFrameCallbackMetadata issueTap the image to open it full size

I encountered a VideoFrameCallbackMetadata issue

I updated the budgetsTap the image to open it full size

I updated the budgets

The app was runningTap the image to open it full size

The app was running

References

Using Phaser in an Angular 8 Component

Github