Jump to content

Angular 5 CLI Integration


Recommended Posts

Hi there. I am very partial to Angular, I use it for basically all of my personal projects and know that, in the long run, I would want to wrap any game that I make in an Angular shell eventually.

Unfortunately, as far as I can tell, it is currently quite difficult to get Phaser 3 working with the Angular CLI due to two simple things: 1) if bundling with webpack (which Angular does by default) the .frag and .vert files need a raw-loader configuration, 2) the CANVAS_RENDERER and WEBGL_RENDERER need to be initialized. The Angular CLI does allow for these things by calling "ng eject" at the command line, adding 

    module: {
        rules: [
            test: [ /\.vert$/, /\.frag$/ ],
            use: 'raw-loader'

    plugins: [
        new webpack.DefinePlugin({
            'CANVAS_RENDERER': JSON.stringify(true),
            'WEBGL_RENDERER': JSON.stringify(true)

but calling "ng eject" has its own set of adverse side effects that are not very ideal (you lose a lot of the CLI). Is there any way that these two small things can be handled so that Phaser 3 can easily be built and run in Angular without needing to use "ng eject"? Does anyone know of a way to currently use Phaser 3 with Angular without having to eject? Currently at any point if phaser.min.js is included as a script the bundler blows up, from all that I can tell.
I know that part of the underlying problem is how the Angular CLI handles its webpack.config.js file in the first place, and how the CLI team doesn't want to allow more customization in the .angular-cli.json file, but that just kind of is what it is right now.

Any feedback would be appreciated, thanks!

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...

Seems to be at a standstill. Was pointed out to me by bitm4ster that Phaser 3 at least supports typescript now, which is another fairly large "must" to use it in a framework that runs completely on Typescript.

Link to comment
Share on other sites

Can you use a separate webpack config for the phaser bundle, and load that in via its own `<script>` tag? The main app's bundle and the game are very separate, there really isn't any need to go through pain to get them to bundle together.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...