Template parse errors on using aframe-template-component with angular2

Question

I am trying to use aframe-template-component example in angular2. i have web packed all aframe library along with npm-template-component and added in index.html. My app.html file includes

<script id="link" type="text/html">
            <a-entity class="link"
                      geometry="primitive: plane; height: 1; width: 1"
                      material="shader: flat; src: ${thumb}"
                      sound="on: click; src: #click-sound"
                      event-set__1="_event: mousedown; scale: 1 1 1"
                      event-set__2="_event: mouseup; scale:1.2 1.2 1"
                      event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
                      event-set__4="_event: mouseleave; scale:1 1 1"
                      set-image="on: click; target: #image-360; src: ${src}"
                      sound="on: click; src: #click-sound"></a-entity>
        </script>
    </a-assets>
    <!--360-degree image.-->
    <a-sky id="image-360" radius="10" src="#city"></a-sky>

    <a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        <a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
        <a-entity template="src: #link" data-src="#city" data-thumb="#city-thumb"></a-entity>
        <a-entity template="src: #link" data-src="#sechelt" data-thumb="#sechelt-thumb"></a-entity>
    </a-entity>

Without template, layout and event-set, everything works fine. If i add these, i am getting error as

    Unhandled Promise rejection: Template parse errors:
Parser Error: Unexpected token # at column 6 in [src: #link] in AppComponent@70:18 ("

    <a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        <a-entity [ERROR ->]template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
       <!-- <a-entity t"): AppComponent@70:18
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-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        [ERROR ->]<a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
       <!-- <"): AppComponent@70:8 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {_nativeError: Error: Template parse errors:
Parser Error: Unexpected token # at column 6 in [src: #link] in AppCom…}message: (...)name: (...)stack: (...)_nativeError: Error: Template parse errors:
Parser Error: Unexpected token # at column 6 in [src: #link] in AppComponent@70:18 ("

    <a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        <a-entity [ERROR ->]template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
       <!-- <a-entity t"): AppComponent@70:18
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-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        [ERROR ->]<a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
       <!-- <"): AppComponent@70:8
    at SyntaxError.BaseError [as constructor] (http://localhost:8080/dev.bundle.js:50332:27)
    at new SyntaxError (http://localhost:8080/dev.bundle.js:5444:16)
    at TemplateParser.parse (http://localhost:8080/dev.bundle.js:14749:19)
    at JitCompiler._compileTemplate (http://localhost:8080/dev.bundle.js:36545:68)
    at http://localhost:8080/dev.bundle.js:36428:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:8080/dev.bundle.js:36428:19)
    at createResult (http://localhost:8080/dev.bundle.js:36311:19)
    at e.invoke (http://localhost:8080/polyfills.bundle.js:1250:15991)
    at n.run (http://localhost:8080/polyfills.bundle.js:1250:13378)__proto__: BaseError Error: Template parse errors:
Parser Error: Unexpected token # at column 6 in [src: #link] in AppComponent@70:18 ("

    <a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        <a-entity [ERROR ->]template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
       <!-- <a-entity t"): AppComponent@70:18
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-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        [ERROR ->]<a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
       <!-- <"): AppComponent@70:8
    at SyntaxError.BaseError [as constructor] (http://localhost:8080/dev.bundle.js:50332:27)
    at new SyntaxError (http://localhost:8080/dev.bundle.js:5444:16)
    at TemplateParser.parse (http://localhost:8080/dev.bundle.js:14749:19)
    at JitCompiler._compileTemplate (http://localhost:8080/dev.bundle.js:36545:68)
    at http://localhost:8080/dev.bundle.js:36428:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:8080/dev.bundle.js:36428:19)
    at createResult (http://localhost:8080/dev.bundle.js:36311:19)
    at e.invoke (http://localhost:8080/polyfills.bundle.js:1250:15991)
    at n.run (http://localhost:8080/polyfills.bundle.js:1250:13378)

I have also included CUSTOM_ELEMENTS_SCHEMA under schemas in app.module.ts file. What would be the reason for this error? Should i add any other directives to use aframe template component in angular2. Please help

Unexpected token # at column 6 in [src: #link] you have this in the error. <a-entity [ERROR ->]template="src: #link" so what you try to achive with code? "template="src: #link" " — Vova Bilyachat
– Vova Bilyachat, Commented Jan 12, 2017 at 6:18
I am trying to attach the a-entity template having id as link to the current a-entity. similar to aframe.io/docs/0.4.0/guides/… — AishApp
– AishApp, Commented Jan 12, 2017 at 6:27

Vlad Romanov · Accepted Answer · 2017-03-04 22:37:50Z

1

There are 2 issues here:

Looks like angular is trying to execute its own "template" directive on a-entity. You have to alias the "template" component with a unique name:

AFRAME.components.atemplate = AFRAME.components.template;
Angular strips script tags from its components, but you can still load the template from an external html file:

<a-entity atemplate="src: url/to/your/template.html"></a-entity>

answered Mar 4, 2017 at 22:37

Vlad Romanov

885 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ngokevin · Accepted Answer · 2017-01-14 13:06:12Z

0

I guess Angular might be hijacking templates to do their own thing?

You can maybe try to remove the type="text/html" to throw off Angular. Or you can always load the templates externally.

// In file ./mytemplate.html
<a-entity class="link"
                  geometry="primitive: plane; height: 1; width: 1"
                  material="shader: flat; src: ${thumb}"
                  sound="on: click; src: #click-sound"
                  event-set__1="_event: mousedown; scale: 1 1 1"
                  event-set__2="_event: mouseup; scale:1.2 1.2 1"
                  event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
                  event-set__4="_event: mouseleave; scale:1 1 1"
                  set-image="on: click; target: #image-360; src: ${src}"
                  sound="on: click; src: #click-sound"></a-entity>

Then.

<a-entity template="src: mytemplate.html"></a-entity>

answered Jan 14, 2017 at 13:06

ngokevin

13.3k5 gold badges46 silver badges88 bronze badges

3 Comments

AishApp Over a year ago

still i am getting the error. I think the problem is due to the keyword template.

ngokevin Over a year ago

Try aliasing the template then using it....AFRAME.components.template-alias = AFRAME.components.template

AishApp Over a year ago

I tried this. Getting some other error "Unhandled Promise rejection: Cannot read property 'getAttribute' of null ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'getAttribute' of null". I think i could solve it using a separate component in angular2 and use selector to call it. not yet tried..

Collectives™ on Stack Overflow

Template parse errors on using aframe-template-component with angular2

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related