Babylon + Angular2 beta-9 : integrate babylonjs in an angular component

[zied sellami]

I'm trying to make an Angular2-Beta9 component that contains a canvas for the Babylonjs call  but the console provide me an error :

 

Uncaught Error: WebGL not supported                                           angular2-polyfills.js:1250

Engine                           @ babylon.2.1.debug.js:5344

(anonymous function)    @ SceneLoader.js:980

Zone.run                        @ angular2-polyfills.js:1243

zoneBoundFn                 @ angular2-polyfills.js:1220
 

If i use the canvas outside Angular works well.
I'm not sure if there is a specefic method to integrate  BabylonsJs with Angular2-beta9.

Im ready to migrate to an other  Angular2 beta-x  if it provides a solution.
 

[GameMonetize]

Hello

 

My first hint would be to use babylonjs 2.3 (latest stable version). Can you then share a page where you can reproduce the issue?

[zied sellami]

Hello,

Ok ,  i will try it .

[matthewharwood]

Hey Zied Sellami,
I've run into the same problem, using babylonjs 2.3!

Babylonjs requires a window hook like DOMLoaded (?).  These lifecycles have been rewritten in angular 2. By a Google dart library called zones.js.   What I have done tho is to use the angular 2 life cycles and to put on the zones stack i add, a set timeout.  This isn't beautiful but it gets it working.  I'll also link the full code to my github but please know this is my first time with both angular 2 and babylon.  Github Babylon component

```

ngAfterViewInit() {
  setTimeout(()=> {
    this.canvas = <HTMLCanvasElement>document.getElementById('renderCanvas');
    this.engine = new BABYLON.Engine(this.canvas, true);
    this.scene = this.createScene();
    this.renderLoop();
  }, 100);
}

```

On the note of angular 2 and babylonJS.

@Deltakosh,  How hard would it be to get an export of all the babylon classes so we can import using es6 destructuring and potentially angular 2 dependancy injection?  Here's an example of angular2-jwt implementation

 

[GameMonetize]

We are already exporting the whole namespace:

if (((typeof window != "undefined" && window.module) || (typeof module != "undefined")) && typeof module.exports != "undefined") {
    module.exports = BABYLON;
};