使用Angular 2的无类型A-Frame组件

Question

有没有办法在Angular-CLI上运行一个没有打字的库？

在我的情况下,我试图安装k-frame使用aframe-template-component和通过文档,我知道我必须创建一个typings.d.ts文件,以使用它与TypeScript.根据这个问题,我尝试了不同的选项,但我无法生成文件或直接在项目中导入它.

我也尝试过运行和安装dts-gen,但是我收到以下错误:

在AFRAME可用之前,组件尝试注册

这意味着我必须首先注册A帧.由于我被困了一段时间,你对如何解决以下问题有所了解吗？提前感谢您的回复!

Answer 1

目前来看，这并不是一件容易的事。

我已经用 AngularCli 尝试过。我使用创建了一个新项目ng new，并按照以下步骤操作：

1. ng new kframetest

2. 安装aframe和aframe-template-component使用：

   npm install aframe aframe-template-component --save
   

3. 由于这两个（zone.js 和 A-frame） catch，attributeChangedCallback您需要在 zone.js 之前加载 A-frame。然后（在polyfills.ts文件中）我添加了：

   import 'aframe';
   import 'aframe-template-component';
   

   就在之前import 'zone.js/dist/zone';

4. 使用kframe 示例作为模板创建一个简单的组件。

5. 为了 Angular 可以解析特殊的 html 标签，<a-entity>你必须添加一个CUSTOM_ELEMENTS_SCHEMAandNO_ERRORS_SCHEMA到NgModuleusingschemas属性：

   schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
   

6. 运行应用程序。

现在您可以在控制台中看到 A-frame 正在运行：

将 A-Frame标签放在场景之前的HTMLscript中，以确保 A-Frame 的所有内容在从 HTML 使用之前都已正确注册。head

aframe-master.js:75646 A-Frame Version: 0.5.0 (Date 10-02-2017, Commit #bf8b8f9)
aframe-master.js:75647 three Version: ^0.83.0
aframe-master.js:75648 WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b

但最大的问题是 Angular 尝试解析 HTML 并且他不理解 aframe 模板语法，你会得到以下错误：

未处理的 Promise 拒绝：模板解析错误：解析器错误： in#第 6 列出现意外标记[src: #boxesTemplate]KFrameTestComponent

 </a-assets>
 <a-entity [ERROR ->]template="src: #boxesTemplate"
           data-box1color="red" data-box2color="green" data-box3color"): KFrameTestComponent@10:12

src嵌入模板上的任何指令均不使用属性绑定。确保属性名称拼写正确并且所有指令都列在@NgModule.declarations.

 </a-assets>

我一直在搜索添加 html 而无需 Angular 解析它，但我没有找到......

我尝试将模板添加到索引 html 中，它似乎有效，但我知道这不是您想要的情况。

您可以从这里获取代码：https ://gitlab.com/jros/angularcli-kframe