angular 9.1 and babylon 4.1 loading gltf issue

Day 1 on babylon.js. I have cloned this repository for angular 9.1 and babylon 4.1 starter kit. I am able to run the project.

Next step is that I wanted to load the gltf model for which I have installed the package babylonjs-loaders and used the library but getting error that path to model 404.


    import { WindowRefService } from './../services/window-ref.service';
import {ElementRef, Injectable, NgZone} from '@angular/core';
import {
} from 'babylonjs';
import 'babylonjs-materials';
import 'babylonjs-loaders';

@Injectable({ providedIn: 'root' })
export class EngineService {
  private canvas: HTMLCanvasElement;
  private engine: BABYLON.Engine;
  private camera: BABYLON.FreeCamera;
  private scene: BABYLON.Scene;
  private light: BABYLON.Light;

  private sphere: Mesh;

  public constructor(
    private ngZone: NgZone,
    private windowRef: WindowRefService
  ) {}

  public animate(): void {
    // We have to run this outside angular zones,
    // because it could trigger heavy changeDetection cycles.
    this.ngZone.runOutsideAngular(() => {
      const rendererLoopCallback = () => {

      if (this.windowRef.document.readyState !== 'loading') {
      } else {
        this.windowRef.window.addEventListener('DOMContentLoaded', () => {

      this.windowRef.window.addEventListener('resize', () => {

  public loadScene(canvas: ElementRef<HTMLCanvasElement>): void {
    // The first step is to get the reference of the canvas element from our HTML document
    this.canvas = canvas.nativeElement;

    // Then, load the Babylon 3D engine:
    this.engine = new BABYLON.Engine(this.canvas,  true);

    // create a basic BJS Scene object
    this.scene = new BABYLON.Scene(this.engine);
    this.scene.clearColor = new Color4(0, 0, 0, 0);

    // create a FreeCamera, and set its position to (x:5, y:10, z:-20 ) = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(5, 10, -20), this.scene);

    // target the camera to scene origin;

    // attach the camera to the canvas, false);

    // create a basic light, aiming 0,1,0 - meaning, to the sky
    this.light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), this.scene);

    BABYLON.SceneLoader.Append("./", "bmw.gltf", this.scene, function (scene) {
    // do something with the scene


I have googled on similar question but did not reach to any conclusion. I might be missing something basic. I have kept the gltf on the same directory as ts file and path is proper. I have tested with putting png image on same path and able to see it in network tab of chrome dev tool with 200 status.

Please help guys. I am guessing the way i am importing babylonjs-loaders is the culprit here.

error screenshot:

Hello and welcome!

This call:

 BABYLON.SceneLoader.Append("./", "bmw.gltf", this.scene, function (scene) 

Are you sure about the “./” ? Where is your asset? Or do you want to import it from your bundle?

I have kept it in same folder where this ts file.

yes but is it deployed to your webserver? We can clearly see the 404 on the glb file

Yes it is, I am running localhost which is traditional angular dev server.

If I put .PNG file in same folder, I am able to access it even see it in n/w tab of browser

are you sure your webserver is serving .gltf mime type?

If the file is in http://localhost/bmw.gltf, then it should work

Will check and confirm

Let us know what you find on this. I ran into same issue with IIS, but adding mime type didn’t seem to resolve. I’ll comment on this if I get it figured.

Update: I switched hosting providers (went with netlify) and it now works. I didn’t take the time to determine the exact issue in my case, but my guess is it has something to do with these differences:

  • old site hosted with IIS on an AWS nano server, new one hosted with server managed by netlify which sends glb. Not sure of their backend configuration.
  • old site didn’t have ssl, new one does