Can GUI work in Angular 6 project?

[dingoogle]

Hi guys,

I got a problem when using GUI in Angular 6 project. Hope someone can give me a hand.
The engine and scene are created in ngAfterContentInit() function as below. 

ngAfterContentInit(){

  let canvas = this.el.nativeElement;
  let engine = new BABYLON.Engine(canvas, true);
  let scene = new BABYLON.Scene(engine);
  let camera = new BABYLON.ArcRotateCamera('camera', 1, 1, 10, BABYLON.Vector3.Zero(), scene);

  let advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

  let text1 = new GUI.TextBlock();
  text1.text = "Hello world";
  text1.color = "white";
  text1.fontSize = 24;
  text1.shadowColor = "black";
  text1.shadowOffsetX = 2;
  text1.shadowOffsetY = 2;
  advancedTexture.addControl(text1);

  let box:BABYLON.Mesh = BABYLON.Mesh.CreateBox('box', 1, scene);
  engine.runRenderLoop(()=>{ 
    scene.render();
  });
}

 

 

The scene works well, "Hello word" shows on the screen. But when moving mouse on the screen, keeping get below error:

 

ERROR TypeError: i.isPointerCaptured is not a function
    at e.callback (babylon.gui.min.js:1)
    at r.push../node_modules/babylonjs/babylon.js.r.notifyObservers (babylon.js:3)
    at HTMLCanvasElement._onPointerMove (babylon.js:12)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4062)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)
    at HTMLCanvasElement.globalZoneAwareCallback (zone.js:1566)

 

This problem CAN'T be reproduced in PG. https://www.babylonjs-playground.com/#KKBHJA#1

 

[dingoogle]

It looks something relevant to  [email protected]. After degrade to  [email protected], the project works well.

[Guest]

Rats! I need to see it live to help. Can you publish your project to a live server? (it could be cool to reference non minified version of bjs and GUi so I can debug :))

[dingoogle]

On 5/15/2018 at 11:30 PM, Deltakosh said:

Rats! I need to see it live to help. Can you publish your project to a live server? (it could be cool to reference non minified version of bjs and GUi so I can debug :))

Hi Deltakosh. Just checked in GUI 3.3.0-alpha.2, The problem is gone. Thanks!

[Guest]

My pleasure!