Angular.io + AFRAME。 Three.js "Cannot find namespace 'THREE'" 打字错误

Question

我试图通过在 angular-cli.json

中定义它来将 A 帧添加到 Angular.io (4.0)

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

并得到如下错误

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)

所以我添加 aframe typings 并将它们导入 tsconfig.app.json

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

第一个错误得到解决，新错误出现在多行中，如：

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'.

能否请您提出正确的解决方法或任何其他方法来使事情正常进行。

更新：

我注意到，如果不上传类型，我可以在组件内 declare var THREE : any; 甚至在 ngInit() 内实现任何 Three.js 逻辑，但仍然无法定位阿帧...

Answer 1

尝试：

1.包括

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

在index.html中，但在包括zone.js之前，

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

在你的app.ts

3.声明schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
在你的@NgModule

我在 angular.io 中的工作代码： https://embed.plnkr.co/SUXTDiWOOZz5FBfymXk5
它完全未完成，但框架可以在简单的预览选项卡中使用。我对 angular 有点陌生，所以它可能很糟糕。

Angular.io + AFRAME。 Three.js "Cannot find namespace 'THREE'" 打字错误

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

aframe

angular