Using ExcaliburJS with Angular 2

[Alexandre Ribeiro]

Hello, I recently came across Excalibur and really liked the look and feel of the lib, and I was thinking of using it on a future project of mine. I currently am working with Angular 2 and thought I'd give it a shot combining them, however I haven't been able to import excalibur as a module (I get the error file "excalibur.d.ts" is not a module) and when I run tsc I am given an error in multiple lines of the excalibur.d.ts file (all of them ES1110 - Type expected). I have tried messing with the said file but haven't gotten anywhere. 

Could anyone please tell me what's the problem, and if possible how to fix it? Thanks.

[Erik Onarheim]

Hi Alexandre,

I appreciate the question!

You're not the first person to notice the module incompatibility, it is definitely a problem. Excalibur at the moment is not designed to work with module systems nicely, see issue for more details https://github.com/excaliburjs/Excalibur/issues/675. Originally it was designed to be a script:src include on an html page or be a ///<reference path="excalibur.d.ts"> include. The web has evolved much and typescript has evolved much since the start of Excalibur and we intend to fix this problem for such use cases.

We have an issue in the current release to address this module problem in the current release 0.8.0 https://github.com/excaliburjs/Excalibur/issues/606. 

There may be a way to work around this problem and patch the d.ts file in excalibur to make it look like a commonjs module.

Add this to the bottom of the excalibur.d.ts

export = ex;

excalibur.js already has this at the end of it

if (typeof module !== 'undefined') {module.exports = ex;}

vscode seems to like it with the commonjs module

I've followed the angular2 quickstart https://angular.io/docs/ts/latest/quickstart.html and come up with this using the hack above: https://github.com/eonarheim/angular2-excalibur-example

Hopefully this helps!

We are very curious to see what people are building so please do share anything you've built :)

Cheers,
Erik

[Alexandre Ribeiro]

Hey Erik, thanks for the quick response.

Now I see why there are some issues regarding compatibility. I kinda expected that to happen, though - Angular 2 has been such a mess with the multiple betas, release candidates and stuff, and honestly I hope they can keep something more stable for us devs to work with. Right now it's a bit too late where I live for me to try out your solution, but I'll definitely check it out as soon as I can. Project-wise, I still am not sure as to what kind of game I wanted to make - my original idea was to create a multiplayer version of a game called Card City Nights (you may have heard of it), but I feel it's a bit of an overkill for someone who still has to learn how to manipulate the lib properly, so... I don't know where I'm going to begin. Anyway, thanks a lot again for your help!

[FMorrison]

On Saturday, November 12, 2016 at 6:30:50 PM UTC-5, Alexandre Ribeiro wrote:

Hello, I recently came across Excalibur and really liked the look and feel of the lib, and I was thinking of using it on a future project of mine. I currently am working with Angular 2 and thought I'd give it a shot combining them, however I haven't been able to import excalibur as a module (I get the error file "excalibur.d.ts" is not a module) and when I run tsc I am given an error in multiple lines of the excalibur.d.ts file (all of them ES1110 - Type expected). I have tried messing with the said file but haven't gotten anywhere. 

Could anyone please tell me what's the problem, and if possible how to fix it? Thanks.

As of February 16, 2019, I have an Angular 7.2.5 edition of the Excalibur Breakout example working.

My github repository is Excalibur Breakout Game Example using Angular 7