CODEWITHSUNDEEP
angularphaser-framework
flogvit
flogvit

Reputation: 1022

Angular 2 and Phaser

I'm trying to create a component which includes Phaser.

Comp.ts (extract):

/// <reference path=“../phaser/phaser.d.ts” />

import { Component, OnInit } from '@angular/core';
import * as Phaser from 'phaser';

export class Comp implements OnInit {
   constructor() {
       console.log(Phaser);
   }

   ngOnInit() {
       console.log(Phaser);
   }
}

in system-config.ts:

System.config({
//…
paths: {
  'phaser': 'app/phaser/phaser.min.js'
});

I've copied all the Phaser code into app/phaser/. WebStorm finds the declarations for Phaser inside my component and the build with "ng build/ng serve" works fine.

But, the console.log(Phaser) in both constructor and ngOnInit returns "Object {}". But if I do a console.log(Phaser) in the browser, it returns the correct Phaser object.

How do I find the Phaser object inside my component?

Upvotes: 1

Views: 2289

Answers (1)

flogvit
flogvit

Reputation: 1022

The simple solution was to remove everything from system-config.ts and instead of doing:

import * as Phaser from 'phaser';

I did:

import '../phaser/phaser';

I know this isn't the preferred way of importing things in typescript, but the way Phaser is compiled, it seems the easiest way. I tried splitting Phaser into separate files with --split, but got into troubles with p2.

Upvotes: 4

Related Questions