Sign in to follow this  
LordLants

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.