Angular 7 ngZone бросает неопределенную ошибку

Question

Я пытаюсь визуализировать 3D-объект, используя three.js. Тем не менее, когда я пытаюсь инициализировать цикл анимации (в пределах ngAfterViewInit) Я продолжаю получать следующую ошибку:

TypeError: Cannot read property 'ngZone' of undefined

Чтобы уменьшить стоимость процессора, я использую ngZone для запуска requestAnimationFrame за пределами Angular. Даже когда я удаляю код для ngZone Я все еще получаю следующую ошибку:

TypeError: Cannot read property 'animate' of undefined

Все это происходит после загрузки соответствующих ресурсов. Чтобы избежать путаницы, не существует переменной класса для ngZone, просто его вызов в качестве параметра в конструкторе.

Код:

export class ProductComponent{
//setup variables
// shirt model and texutre are pulled from firebase storage
constructor(private storage : AngularFireStorage, public ngZone: NgZone) {

        this.modelUrl = this.storage.ref('path/to/model.obj').getDownloadURL();
        this.textureUrl = this.storage.ref('path/to/texture.jpg').getDownloadURL();

        this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
        this.scene = new THREE.Scene();
        this.controls = new THREE.OrbitControls(this.camera,this.renderer.domElement);
        this.clock = new THREE.Clock();
        this.manager = new THREE.LoadingManager();
        this.loader = new THREE.OBJLoader(this.manager);
    }

ngAfterViewInit(){
    //setup
    this.loadResources(this.modelValue, this.texture, this.scene, this.renderer, this.container, this.animate);
 }
private loadResources(model, texture, scene, renderer, container, callback){

    this.camera.position.set(0, 0, 50);
    this.camera.lookAt(new THREE.Vector3(0, 0, 0));

    // scene

    scene.fog = new THREE.FogExp2(0xffffff, 0.0003);

    const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
    scene.add(ambientLight);

    const pointLight = new THREE.PointLight(0xffffff, 0.8);
    this.camera.add(pointLight);
    scene.add(this.camera);

    this.loader.load(model, function (object) {
        object.traverse(function (child) {

            if (child instanceof THREE.Mesh) {

                child.material.map = texture;

                // repeat image on model
                child.material.map.wrapS = child.material.map.wrapT = THREE.RepeatWrapping;
                child.material.map.repeat.set(4, 4);

                child.material.needsUpdate = true;

            }

        });

        object.scale.set(1.5, 1, 1.5);
        scene.add(object);
        console.log('PARTS:', object.children);

        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setClearColor(scene.fog.color);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        callback();
    }); //onProgress, onError
}

animate() : void {
        this.ngZone.runOutsideAngular(() => {
            requestAnimationFrame(this.animate);
        });
        this.render();
        this.update();

    }

}

Answer 1

this.animate вызывается внутри метода loadResources, Здесь вы передаете это как последний аргумент:

this.loadResources(this.modelValue, this.texture, this.scene, this.renderer, this.container, this.animate);

Проблема в том, что this.animate будет вызван внутри callback из this.loader.load и это callback это обычная функция, поэтому this Внутри animate не будет иметь ngZone или же animate, Возможное решение - использовать функцию стрелки для callback из this.loader.load (так как this.animate будет вызываться внутри него):

private loadResources(model, texture, scene, renderer, container, callback) {

  this.camera.position.set(0, 0, 50);
  this.camera.lookAt(new THREE.Vector3(0, 0, 0));

  // scene
  scene.fog = new THREE.FogExp2(0xffffff, 0.0003);

  const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
  scene.add(ambientLight);

  const pointLight = new THREE.PointLight(0xffffff, 0.8);
  this.camera.add(pointLight);
  scene.add(this.camera);

  // use arrow function for callback of this.loader.load
  this.loader.load(model, (object) => {

    object.traverse(function (child) {

      if (child instanceof THREE.Mesh) {

        child.material.map = texture;

        // repeat image on model
        child.material.map.wrapS = child.material.map.wrapT = THREE.RepeatWrapping;
        child.material.map.repeat.set(4, 4);

        child.material.needsUpdate = true;

      }
    });

    object.scale.set(1.5, 1, 1.5);
    scene.add(object);
    console.log('PARTS:', object.children);

    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setClearColor(scene.fog.color);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    // this.animate
    callback();
  }); //onProgress, onError
}

Или, если вы хотите использовать обычную функцию в качестве обратного вызова для this.loader.load, вы можете связать this в callback:

// assign this to const that,
// so it can be used for binding
const that = this;
this.loader.load(model, function(object) {

  ...

  // this.animate
  const callbackWithThisBinding = callback.bind(that);
  callbackWithThisBinding();
}