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

Question

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

就我而言，我正在尝试安装k-frame 以使用aframe-template-component 并通过documentation，我知道我必须创建一个typings.d.ts 文件才能将其与TypeScript 一起使用。根据this的问题，我尝试了不同的选项，但我无法生成文件或直接在项目中导入。

我也尝试过运行和安装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) 都抓住了attributeChangedCallback，您需要在 zone.js 之前加载 A-frame。然后（在polyfills.ts文件中）我已经添加了：

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

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

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

5. 为了让 Angular 能够解析像 <a-entity> 这样的特殊 html 标签，您必须使用 schemas 属性将 CUSTOM_ELEMENTS_SCHEMA 和 NO_ERRORS_SCHEMA 添加到 NgModule：

   schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
   

6. 运行应用程序。

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

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

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 拒绝：模板解析错误： 解析器错误：KFrameTestComponent 中 [src: #boxesTemplate] 的第 6 列中出现意外标记 #

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

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

 </a-assets>

我一直在寻找关于在没有 Angular 解析的情况下添加 html 但我没有找到...

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

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