Angular.io + AFRAME. Typings error with Three.js "Cannot find namespace 'THREE'"

Question

I am trying to add the A-Frame into Angular.io (4.0) by defining it inside angular-cli.json

"scripts": [
     "../node_modules/aframe/dist/aframe-master.js"
  ],

And get the following error

polyfills.bundle.js:22719 Uncaught TypeError: Cannot assign to read only property 'attributeChangedCallback' of object '[object HTMLElement]'
    at http://localhost:4200/polyfills.bundle.js:22719:46
    at Array.forEach (native)
    at HTMLDocument.document.registerElement (http://localhost:4200/polyfills.bundle.js:22706:23)
    at module.exports.registerElement (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (http://localhost:4200/scripts.bundle.js:21:8), <anonymous>:72793:19)
    at Object.94.../lib/three (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (http://localhost:4200/scripts.bundle.js:21:8), <anonymous>:71194:18)
    at s (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (http://localhost:4200/scripts.bundle.js:21:8), <anonymous>:1:620)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (http://localhost:4200/scripts.bundle.js:21:8), <anonymous>:1:671)
    at Object.144.../package (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (http://localhost:4200/scripts.bundle.js:21:8), <anonymous>:75638:1)
    at s (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (http://localhost:4200/scripts.bundle.js:21:8), <anonymous>:1:620)
    at e (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (http://localhost:4200/scripts.bundle.js:21:8), <anonymous>:1:791)

So I add aframe typings and import them inside tsconfig.app.json

 "files": [
    "typings/AFRAME.d.ts"
  ]

The first error becomes resolved and the new one appears for multiple lines like:

ERROR in /Users/Illusion/Desktop/charterdart/charterdart-experience/src/typings/AFRAME.d.ts (18,45): Cannot find namespace 'THREE'.

ERROR in /Users/Illusion/Desktop/charterdart/charterdart-experience/src/typings/AFRAME.d.ts (136,13): Cannot find namespace 'THREE'.

ERROR in /Users/Illusion/Desktop/charterdart/charterdart-experience/src/typings/AFRAME.d.ts (144,30): Cannot find namespace 'THREE'.

Can you please suggest the proper way how to work it out or any other approach to get the things work.

Update:

I've noticed that if typings are not uploaded, I can declare var THREE : any; inside the component and even implement any Three.js logic inside ngInit(), but still can't target the Aframe...

Answer 1

Try:

1. including

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

in the index.html, but before including zone.js,

2. import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

in your app.ts

3. declare schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
in your @NgModule

My working code in angular.io: https://embed.plnkr.co/SUXTDiWOOZz5FBfymXk5
Its completely unfinished, but aframe works there, in the simple preview tab. I'm kinda new to angular, so it may be crappy.