[SOLVED] PlayCanvas integration in an Angular project


I know there are several threads about this, but they are not in the same context as me.

I have a Playcanvas project, and i tried to integrate it in an Angular project.

The repository is here : https://github.com/vogloblinsky/playcanvas-angular

There are 2 screens : home and game.

When going to game screen, the first time, it works well, but after if i come back to home, and re-open game screen, i got a SIGSEGV error in Chrome


Just for information, i loaded the same Playcanvas project in this Vue.js starter with success : https://github.com/isobolewski/playcanvas-vue

1 Like

When you change pages, what do you do with the PlayCanvas app? Is it paused, destroyed, canvas removed from view, etc?

It looks like the SIGSEGV may have been caused by the physics system.

I destroy the engine when I exit the game page with pc.app.destroy()

It looks like the issue is that the WASM module for the physics doesn’t like being loaded twice.

As a quick test, I did the following:

            this.pcApplication = new pc.Application(this.canvas, {
                elementInput: this.devices.elementInput,
                keyboard: this.devices.keyboard,
                mouse: this.devices.mouse,
                gamepads: this.devices.gamepads,
                touch: this.devices.touch,
                graphicsDeviceOptions: window['CONTEXT_OPTIONS'],
                assetPrefix: window['ASSET_PREFIX'] || '',
                scriptPrefix: window['SCRIPT_PREFIX'] || '',
                scriptsOrder: window['SCRIPTS'] || [],

            if (window['foo'] !== true && window['PRELOAD_MODULES'].length > 0) {
            } else {
            window['foo'] = true;

Which ensures the modules are only loaded once on the page and seems to work for this example.

Yeah it works fine, thanks !

The repository was renamed : https://github.com/vogloblinsky/playcanvas-angular