0

What I want

Use the library HTML-GL inside a component in my Angular project (with the Ionic framework included).

What I got now

I included the library scripts inside my index.html, right above the polyfills.js - like this:

<!-- HtmlGL import -->
<script async src="assets/js/htmlgl.js"></script>
<script async src="assets/js/htmlGL_pulse.js"></script>

Right now the following web element works in index.html:

<html-gl>
    <h1>This is an animated header</h1>
<html-gl>

What goes wrong

When I place the html above in a separate component I get the following error:

Uncaught Error: Template parse errors:
'html-gl' is not a known element

How can I make sure the component is aware of the `html-gl> tag?

Lars
  • 340
  • 4
  • 19
  • use `npm install --save html-gl` to install the module – Sachila Ranawaka Dec 27 '17 at 14:19
  • I did that at the beginning, but this did not work either. Did I forgot to import it somewhere? Is there some sort of location in Ionic where I can bootstrap Javascript files? – Lars Dec 27 '17 at 14:22
  • I could be wrong, but I believe that HTML-GL is not going to work with Angular. Both HTML-GL and Angular manipulate the DOM, and HTML-GL creates WebGL representations of DOM elements and hides the actual DOM after, which will cause problems for Angular change tracking. Not to mention, the issue you have here is that Angular actually thinks that `html-gl` is an Angular Component, which it clearly is not. – Claies Dec 27 '17 at 14:29
  • you could *try* the jquery style of using HTML-GL, which is to assign your HTML-GL content to an element and then call `$(element).htmlgl()` to activate it, rather than using the web component, but it's still quite unclear what that would do to angular bindings within the element. – Claies Dec 27 '17 at 14:33
  • @Claies That sounds very reasonable. Let me try the jQuery option just for the sake of getting it to work. The following problem with jQuery is that it does not know the function `htmlgl()`. Is this a load order issue? I have both libraries installed through npm. – Lars Dec 27 '17 at 14:50

1 Answers1

1

To use dom elements which are not in the Angular registry you have to import the custom elements schema from angular core and append it to the schemas of your NgModule.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';.

Shane
  • 3,049
  • 1
  • 17
  • 18
  • Yes, I did this and the page does get rendered without errors. However, the component is not being animated. A working example of htmlgl will output a html element like ``, but what it does with the schemas, it renders ``. It misses the parameters. – Lars Dec 27 '17 at 14:54
  • Ah, hang on. I have solved this once for someone on here for xdom, another webgl library though the dom. But I am on mobile at the moment, formatting a post in here is terrible. – Shane Dec 27 '17 at 14:59
  • @Lars I believe the same thing happens to x3dom when loading the elements. The HTML gl library will search for all instances of html-gl and initialize it. But the library most likely only checks the dom at window load, therefor the components in the element are improperly set. You will have to load the library after loading the component as described in here: https://stackoverflow.com/questions/44260121/integrate-angular-and-x3d-render-a-simple-box/44261948#44261948 – Shane Dec 27 '17 at 15:06
  • I am trying to get the jQuery technique working. No matter how I place my imports, the function `htmlgl()` isn't known to jQuery. Inside my component jQuery is loaded correctly, but when tying to trigger the `htmlgl()`, the app crashes and tells me `htmlgl()` isn't a function. Wrong load order? – Lars Dec 28 '17 at 10:07