11

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!

Community
  • 1
  • 1
d_z90
  • 1,213
  • 2
  • 19
  • 48
  • The title "Check if shader has already been registered" is confusing. You might get better responses with something like "Use untyped A-Frame components with Angular 2". – Don McCurdy Feb 16 '17 at 18:51
  • Thanks for the tip man! Appreciated. Concerning the question, any ideas on what I am doing wrong? – d_z90 Feb 17 '17 at 09:42
  • I'm not familiar with that library, but the error `Component attempted to register before AFRAME was available` is not a TypeScript error. It is some runtime error emitted by the library. I see no evidence that the library exports anything at all (and there is no `"main"` property in the `package.json`). Also note that the example does `require('kframe');`. I would not be at all surprised I you are loading your dependencies in an invalid order. – Aluan Haddad Feb 24 '17 at 02:41

1 Answers1

3

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

H. Pauwelyn
  • 13,575
  • 26
  • 81
  • 144
Javier Ros
  • 3,511
  • 2
  • 21
  • 41
  • Thanks for your effort man! In the end I have managed to make it work adding the template in `index.html`, even though it impacts the loading performances of the website. – d_z90 Mar 02 '17 at 09:52
  • 1
    I didn't know k-frame and a-frame and I liked it. Any way, have you thought about make a feature request to angular project? – Javier Ros Mar 02 '17 at 09:55
  • 1
    The feature is about can deactivate Angular Html Parser for some elements. For example: `` this will be a good feature to admit frameworks like `k-frame`. If you decide to open a feature request let me know to up vote it. – Javier Ros Mar 02 '17 at 11:51
  • Hey, thanks for pointing out where to put the aframe.js script in my `index.html`. That did the trick. For your problem with the invalid tags you can add `schemas: [ CUSTOM_ELEMENTS_SCHEMA ]` to your module as stated here: http://stackoverflow.com/questions/39428132/ – Wulf Mar 06 '17 at 16:17