BabylonJS Component in Angular not displaying on Routing navigation

Hi Everyone,

Looking for a bit of insight on how to use Babylon inside an angular component.
I have a basic setup with a ‘hello world’ babylon component and if I hit my application directly on the page for that Canvas item that hold babylonjs it renders perfectly. But if I navigate off the page inside the App using Routing for angular and come back to the page it doesn’t re-render. I am assuming I need to hook into some sort of event to trigger it. Have put a crap load of effort to figure out what happens differently from the component’s lifecycle using internal routing vs direct url . haven’t got a clue :confused: doesn’t appear to be anthing that doesn’t get called.

Anyone with any thoughts on what to look at or ideas of what is wrong?

I would post the code but it is needs a complete angular dev with mulitple files etc etc …

Crossing Fingers…


Hey and welcome!!!

We have several people in this forum who can help (for instance @brianzinn) .
And we also have this doc: How to use BabylonJS in an Ionic Angular app - Babylon.js Documentation

Thanks Deltakosh.

I had read that doc. spent a night fighting through trying to sort out the @Injectable decorator but seems like I can’t construct an engine without a canvas item so I am unsure how I would proceed to make BABYLON.engine @Injectable so it is re-used on my whole App. Not sure why I would need it either. What I have works … just not if I navigate to it from another component in Angular.
I have a bunch of logging inside my TS scene that logs mouse moves control clicks etc… and they are firing even though the display isnt rendered… I am close I know it, I can taste it :confused:


Let’s wait for @brianzinn to help us then :smiley:


I have worked with babylon and angular on some occasions, but never had similar problems.
Do you get any errors related to what is happening?
I have put together a basic angular app with a babylonjs component on different routes. See if this helps.

If you dont have a huge app you can also post it on stackblizt, no dowload necessary :wink:


Thank you rpajo. I have just fired up the sandbox and YES that is exactly the example I would need to sort through my issue on my app.

Looking through it I used ngOnInit not ngAfterViewInit to fire when to create the scene.

modified my code to use that hook instead. Amazing it is now working.

Thanks so much rpajo!!!