problems with phaser 3 polyfills and angular 6

[bousing]

Hi

  I wrote this because I have problems with polyfills and other phaser src. I want make a phaser game with Angular 6 but when I import the library in my component, created the config object and run the phaser's object the browser says  global is not defined at Object../node_modules/phaser/src/polyfills/requestAnimationFrame.js

I declare it (is not the best practice, I know) but other var in other script neither is it declared.. I think theese problems appears because I use Angular and transpile with a different way than babel...I dont know...

can you help me ? Thanks for reading

[Fairydhwen]

Hey,

 

I'm also looking to integrate Phaser 3 into Angular 6 and dont get a proper way...

ATM there is a nice module you can use to do this : https://github.com/TristanBonsor/phaser-component-library

This works great.

Let me know if you find the solution.

Regards.

[Fairydhwen]

Phaser 3.11.0 with Angular 6 Workaround : 

1. install angular project with cli

2. add Phaser to your project with npm

3. copy the phaser.d.ts from the official phaser 3 doc into your src folder

4. modify this files by adding at the begining :

declare interface ActiveXObject {}
declare interface GamepadHapticActuator {}

5. add phaser.js into the angular.json, in the scripts section :

"node_modules/phaser/dist/phaser.js"

This should now works. (but this will need more inspection with ActiveXObject and GamepadHapticActuator).

 

Regards

[Pradeep Kumar]

Hi Fairydhwen, 

Greetings ☺️,

I have a doubt, how can we work, when we want to work with the .JS file which was implemented as per the phaser framework in the Angular 6 and the type script vise versa, Can you please help me on this.

Thanks in advance.

[Chen Wei]

On 6/26/2018 at 5:30 AM, bousing said:

Hi

  I wrote this because I have problems with polyfills and other phaser src. I want make a phaser game with Angular 6 but when I import the library in my component, created the config object and run the phaser's object the browser says  global is not defined at Object../node_modules/phaser/src/polyfills/requestAnimationFrame.js

I declare it (is not the best practice, I know) but other var in other script neither is it declared.. I think theese problems appears because I use Angular and transpile with a different way than babel...I dont know...

can you help me ? Thanks for reading

I faced the same problem and finally found that you can not import definitions from 'phaser' directly in your ts file, just use `Phaser.XXX` instead.

E.g. remove lines such as `import { BlendModes } from 'phaser';` and use `Phaser.BlendModes.XXX` when you need refer BlendModes.

Just point out here for help others.

Github Demo

Edited October 10, 2018 by Chen Wei
add github demo link