Use untyped A-Frame components with Angular 2

Question

is there a way to run a library on Angular-CLI which does not have typings?

In my case, I am trying to install k-frame to use aframe-template-componentand via the documentation, I understand that I have to create a typings.d.ts file to use it with TypeScript. According to this question, I have tried the different options but I am not able to generate the file or import it directly inside the project.

I have tried also to run and install dts-gen, but I am getting the following error:

Component attempted to register before AFRAME was available

Which means that I have to register A-frame first. Since I am stuck since a while, do you have an idea on how to solve the following issue? Thanks in advance for your replies!

Answer 1

At the moment it's a not easy task.

I have try it with AngularCli. I have created a new project using ng new and I have follow this steps:

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.

Now you can see, in the console, A-frame running:

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

But the big problem is that Angular tryes to parse the HTML and he don't understand the aframe template syntax, you get this errors:

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>

I have been searching about add html without Angular parse it but I didn't find ...

I have tried to add the template to the index html and it seems to work but I understand that is not your desired situation.

You can get the code from here: https://gitlab.com/jros/angularcli-kframe