使用未类型化的 A-Frame 组件与 Angular 2。

Question

有没有一种方法可以在Angular-CLI上运行没有typings的库?

在我的情况下，我正在尝试安装k-frame来使用aframe-template-component，并通过文档，我了解到我必须创建一个typings.d.ts文件才能与TypeScript一起使用它。根据这个问题，我尝试了不同的选项，但我无法生成文件或直接导入到项目中。

我还尝试运行和安装dts-gen，但是我遇到了以下错误:

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

这意味着我必须先注册A-frame。由于我已经卡住了一段时间，你们有什么想法解决以下问题吗？提前感谢您的回复！

- d_z90

---

"检查着色器是否已注册"这个标题让人感到困惑。改用类似“在Angular 2中使用未打类型的A-Frame组件”这样的标题可能会得到更好的回应。 - Don McCurdy

谢谢你的建议，感激不尽。关于问题，你有任何想法我做错了什么吗？ - d_z90

我不熟悉那个库，但是错误信息 Component attempted to register before AFRAME was available 不是 TypeScript 错误。 这是由该库发出的某些运行时错误。 我看不到该库导出任何东西（package.json 中也没有 "main" 属性）。 另外请注意，示例中使用了 require('kframe');。如果您以无效的顺序加载依赖项，我将一点也不感到惊讶。 - Aluan Haddad

Answer 1

目前这是一项不容易的任务。

我尝试使用AngularCli完成它。我使用ng new创建了一个新项目，并按照以下步骤进行：

1. ng new kframetest

2. Install aframe and aframe-template-component using:

   npm install aframe aframe-template-component --save
   

3. Due to both (zone.js and A-frame) catch attributeChangedCallback you need to load A-frame before zone.js. Then (in polyfills.ts file) I have added:

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

   Just before of import 'zone.js/dist/zone';

4. Create a simple component using kframe sample as template.

5. In order to Angular can parse specials html tags like <a-entity> you have to add a CUSTOM_ELEMENTS_SCHEMA and NO_ERRORS_SCHEMA to NgModule using schemas property:

   schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
   

6. Run the application.

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

Put the A-Frame script tag in the head of the HTML before the scene to ensure everything for A-Frame is properly registered before they are used from 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模板语法，你会收到以下错误：

Unhandled Promise rejection: Template parse errors: Parser Error: Unexpected token # at column 6 in [src: #boxesTemplate] in KFrameTestComponent

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

Property binding src not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the @NgModule.declarations.

 </a-assets>

我一直在寻找如何添加html而不经过Angular解析它，但是我没有找到...

我试着将模板添加到index html中，它似乎可以工作，但我理解这并不是你想要的情况。

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

- Javier Ros

---

谢谢你的努力！最终我成功地将模板添加到了“index.html”中，尽管它会影响网站的加载性能。 - d_z90

我以前不知道 k-frame 和 a-frame，但我很喜欢。无论如何，你考虑过向 Angular 项目提出特性请求吗？ - Javier Ros

该功能是关于可以禁用某些元素的 Angular Html 解析器。例如: <ng-avoid-angular-parser><a-elements-and-whateveryouwant/></ng-avoid-angular-parser> 这将是一个很好的功能，以允许像 k-frame 这样的框架。如果您决定发起一个功能请求，请让我知道以便投票支持它。 - Javier Ros

嗨，感谢指出在我的“index.html”中放置aframe.js脚本的位置。这真的起作用了。关于你的无效标记问题，你可以像这里所述将schemas：[CUSTOM_ELEMENTS_SCHEMA]添加到你的模块中：http：//stackoverflow.com/questions/39428132/ - Wulf