Angular.io + AFRAME. Typing error with Three.js "Cannot find namespace" THREE "
I am trying to add A-Frame to Angular.io (4.0) by defining it internally 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 a vise and import it insidetsconfig.app.json
"files": [
"typings/AFRAME.d.ts"
]
The first error will be resolved and a new one will appear for multiple lines, for example:
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'.
Could you please suggest the correct way to work or any other approach to make things work.
Update:
I noticed that if the icons are not loaded, I can declare var THREE : any;
inside the component and even implement any logic Three.js
inside ngInit()
, but still I can’t target Aframe ...
source to share
Try:
1.including
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
in 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 ]
your @NgModule
My working code at angular.io:
https://embed.plnkr.co/SUXTDiWOOZz5FBfymXk5
Its completely unfinished, but aframe works there, in a simple preview tab. I'm new to angular so it can be cheesy.
source to share