Cannot assign to read only property 'detachedCallback' of object '#'

Question

I installed A-Frame by

npm install aframe --save.

When I use:

import 'aframe';  // or use: require 'aframe';
import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <a-scene></a-scene>
  `
})
export class AppComponent {}

I got the error:

zone.js:1046Uncaught TypeError: Cannot assign to read only property 'detachedCallback' of object '#'

I checked this Angular_VRDemo, but still did not figure out myself.

Answer 1

I guess it because aframe library doesn't implement some properties (like detachedCallback and other) by creation custom element. https://github.com/aframevr/aframe/blob/v0.3.1/src/core/a-assets.js#L13-L73

zonejs has overrided version of document.registerElement that requires all properties so it breaks library loading (https://github.com/angular/zone.js/blob/v0.6.17/dist/zone.js#L1151-L1170).

As workaround you can load this library before zonejs