Question

我试图通过在angular-cli.json

中定义它来将A-Frame添加到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;在组件内部，甚至可以在Three.js内实现任何ngInit()逻辑，但仍然无法定位Aframe。 ..

Answer 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.io + AFRAME。使用Three.js键入错误“找不到命名空间'THREE'”

1 个答案: