Error importing phaser using typescript in Ionic2

[esteban-filardi]

I was trying to use phaser in a Ionic2 application.
When I try to import phaser I get the following error:

File '.../node_modules/phaser-ce/typescript/phaser.comments.d.ts' is not a module.

Even vscode warns me there's something wrong with the import statement.

Here's the code:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import {Phaser} from 'phaser-ce';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    
  }

Can anyone help me resolve this issue?

[smatthews1999]

Pretty sure that's not how you do it.

Go to your angular.cli.json file (or whatever ionic uses for webpack config) and add phaser script...

Then in your tsconfig.json file add the reference to the types.

This sometimes does not work for me and have to resort to triple slash type reference...

[rpascal]

I am receiving the same error as you. Were you able to get this working or no?

[esteban-filardi]

No, I gave up of trying to use Ionic and Phaser using Typescript. Sorry :-/

[Dreaded-Gnu]

I fixed the phaser-ce module name for typescript a while back now, so it should not fail any longer with version 2.7.5.

If it still fails, please provide a sample application, so that the issue can be fixed

[esteban-filardi]

I've updated phaser-ce to 2.7.5 and although the error is different, the application still doesn't work.

Importing like this

import {Phaser} from 'phaser-ce';

Results in

Module "phaser-ce" has no exported member 'Phaser'

Importing like this

import * as Phaser from 'phaser-ce';

results in

PIXI is not defined

I've created a repository in case you want to check it out:

https://github.com/esteban-filardi/phaser-test

I guess you should install ionic globally,

npm install -g cordova ionic

Then you can run:

ionic lab

to test the application.

[Dreaded-Gnu]

Normally, when using webpack only, the following import should be okay, when correctly configured: import * as Phaser from 'phaser-ce';

Ionic2 and webpack is importing the wrong file. You've to extend the webpack configuration:

• Copy following file into your project and extend it: node_modules/@ionic/app-scripts/config/webpack.config.js

var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);

// new, necessary for resolving to correct files (begin)
var rootDir = path.resolve(__dirname),
    phaser_module = path.join(rootDir, "node_modules", "phaser-ce"),
    phaser = path.join(phaser_module, "build", "custom", "phaser-split.js"),
    pixi = path.join(phaser_module, "build", "custom", "pixi.js"),
    p2 = path.join(phaser_module, "build", "custom", "p2.js");
// new, necessary for resolving to correct files (end)

module.exports = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,

  resolve: {
    extensions: ['.ts', '.js', '.json', '.js'], // <-- extended by considering also extension '.js'
    modules: [path.resolve('node_modules')],
    // new for alias resolve (begin)
    alias: {
      "pixi": pixi,
      "p2": p2,
      "phaser-ce": phaser
    }
    // new for alias resolve (end)
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      // new for exposing pixi, correct phaser and p2 into global scope (begin)
      {
        test: /pixi\.js/,
        loader: "expose-loader?PIXI"
      },
      {
        test: /phaser-split\.js/,
        loader: "expose-loader?Phaser"
      },
      {
        test: /p2\.js/,
        loader: "expose-loader?p2"
      },
      // new for exposing pixi, correct phaser and p2 into global scope (end)
      {
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER
      }
    ]
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
  ],

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

Then you can easily import phaser ce by using following import statements:

import "pixi";
import "p2";
import * as Phaser from "phaser-ce";

For build process you then have to specify the webpack config file, because it won't be detected automatically as far as I've seen:

ionic-app-scripts serve -w ./webpack.config.js

We should consider adding it within the readme, or something else.

[Dreaded-Gnu]

When you don't want to copy the webpack file, you could write a partial and use webpack-merge to merge the app scripts webpack config with the partial one of you.
Then you don't have to check on each update of ionic scripts package the webpack config again.

[samme]

Closing for #96

[archagy]

//Edit

Previously I had problems with my last configuration so I just deleted and start over again.

I follow the steps from@Dreaded-Gnu editing the webpack.cofig.js file from node_modules/@ionic/app-scripts/config

I had to do some changes to make it works.

firstly I change the rootDir variable to path.resolve('node_modules'); and install expose-loader with npm i expose-loader --save.

I want to use the webpack.config file from my root directory of the project but I got the following error message.

my webconfig.js file

var path = require('path');
var webpack = require('webpack');
var ionicWebpackFactory = require(process.env.IONIC_WEBPACK_FACTORY);


var node_modules = path.resolve('node_modules'),
    phaser_module = path.join(node_modules, "phaser-ce"),
    phaser = path.join(phaser_module, "build", "custom", "phaser-split.js"),
    pixi = path.join(phaser_module, "build", "custom", "pixi.js"),
    p2 = path.join(phaser_module, "build", "custom", "p2.js");


module.exports = {
  entry: process.env.IONIC_APP_ENTRY_POINT,
  output: {
    path: '{{BUILD}}',
    publicPath: 'build/',
    filename: process.env.IONIC_OUTPUT_JS_FILE_NAME,
    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
  },
  devtool: process.env.IONIC_SOURCE_MAP_TYPE,

  resolve: {
    extensions: ['.ts', '.js', '.json'],
    modules: [path.resolve('node_modules')],
    alias: {
      "pixi": pixi,
      "p2": p2,
      "phaser-ce": phaser
    }
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      // new for exposing pixi, correct phaser and p2 into global scope (begin)
      {
        test: /pixi\.js/,
        loader: "expose-loader?PIXI"
      },
      {
        test: /phaser-split\.js/,
        loader: "expose-loader?Phaser"
      },
      {
        test: /p2\.js/,
        loader: "expose-loader?p2"
      },
      {
        test: /\.ts$/,
        loader: process.env.IONIC_WEBPACK_LOADER
      }
    ]
  },

  plugins: [
    ionicWebpackFactory.getIonicEnvironmentPlugin(),
  ],

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

Also @Dreaded-Gnu I don't understand what did you mean with webpack-merge, could you explain it please?

N.T
I run my serve with ionic serve -w ./webpack.config.js. I don't know if it is correct because ionic-app-scripts serve don't work for me.

Sorry for my bad English and I hope this helps someone.

[arijitnaskar]

I did as said by Dreaded-Gnu above.
After doing all the configuration, if I run ionic lab its working with no error.
Then I tried to build the apk with ionic cordova build android --prod
this is throwing the following error:

Error: ./src/pages/home/home.js
Module not found: Error: Can't resolve 'pixi' in 'D:\PhoneGapProjects\firstgame\src\pages\home'
resolve 'pixi' in 'D:\PhoneGapProjects\firstgame\src\pages\home'
  Parsed request is a module
  using description file: D:\PhoneGapProjects\firstgame\package.json (relative path: ./src/pages/home)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\PhoneGapProjects\firstgame\package.json (relative path: ./src/pages/home)
    resolve as module

Please any one help. I am stuck here.