aframe-template-component template conflicts with Angular4

I’m trying to do this example in Angular4. I’ve added all the dependencies in the index.html file and also tested it by installing them via npm and importing them. I’ve imported CUSTOM_ELEMENTS_SCHEMA and added it to my schemas in app.module.ts

Everything works before I add <a-entity template="src: plane" data-thumb="#city-thumb"></a-entity>

This is my app.component.html file: `<a-scene> <a-assets> <audio id="click-sound" src="audio/click.ogg"></audio>

<script id="plane" 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"></a-entity>
</script>

</a-assets> <a-sky id="image-360" radius="10" src="#city"></a-sky> <a-entity template="src: plane" data-thumb="#city-thumb"></a-entity> <a-entity template="src: plane" data-thumb="#cubes-thumb"></a-entity> <a-entity template="src: plane" data-thumb="#sechelt-thumb"></a-entity> <a-camera> <a-cursor id="cursor"> <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation> <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation> </a-cursor> </a-camera> </a-scene>`

that gives me this error:

`02:33:37.083 Template parse warnings: The template attribute is deprecated. Use an ng-template element instead. ("<a-sky id="image-360" radius="10" src="#city"></a-sky>

<a-entity [WARNING ->]template="src: plane" data-thumb="#city-thumb"></a-entity>
<a-entity template="src: plane" data-t"): ng:///AppModule/AppComponent.html@22:14 1 vendor.bundle.js:46824:9`

and this errors:

`02:33:37.085 Error: Template parse errors: 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-sky id="image-360" radius="10" src="#city"></a-sky>

[ERROR ->]<a-entity template="src: plane" data-thumb="#city-thumb"></a-entity>
<a-entity template="src: pla"): ng:///AppModule/AppComponent.html@22:4

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”. ("ink we will build. --> <a-entity template="src: plane" data-thumb="#city-thumb"></a-entity> [ERROR ->]<a-entity template="src: plane" data-thumb="#cubes-thumb"></a-entity> <a-entity template=“src: pl”): ng:///AppModule/AppComponent.html@23:4 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”. (“ty-thumb”></a-entity> <a-entity template="src: plane" data-thumb="#cubes-thumb"></a-entity> [ERROR ->]<a-entity template="src: plane" data-thumb="#sechelt-thumb"></a-entity>

"): ng:///AppModule/AppComponent.html@24:4 1 vendor.bundle.js:17734:34 syntaxError http://192.168.1.7:4200/vendor.bundle.js:17734:34 …/…/…/compiler/@angular/compiler.es5.js/TemplateParser.prototype.parse http://192.168.1.7:4200/vendor.bundle.js:28854:19 …/…/…/compiler/@angular/compiler.es5.js/JitCompiler.prototype._compileTemplate http://192.168.1.7:4200/vendor.bundle.js:43006:18 …/…/…/compiler/@angular/compiler.es5.js/JitCompiler.prototype._compileComponents/< http://192.168.1.7:4200/vendor.bundle.js:42926:56 forEach self-hosted:5018:9 …/…/…/compiler/@angular/compiler.es5.js/JitCompiler.prototype._compileComponents http://192.168.1.7:4200/vendor.bundle.js:42926:9 …/…/…/compiler/@angular/compiler.es5.js/JitCompiler.prototype._compileModuleAndComponents/< http://192.168.1.7:4200/vendor.bundle.js:42813:13 then http://192.168.1.7:4200/vendor.bundle.js:17723:143 …/…/…/compiler/@angular/compiler.es5.js/JitCompiler.prototype.compileModuleAndComponents http://192.168.1.7:4200/vendor.bundle.js:42812:16 …/…/…/compiler/@angular/compiler.es5.js/JitCompiler.prototype.compileModuleAsync http://192.168.1.7:4200/vendor.bundle.js:42741:32 …/…/…/core/@angular/core.es5.js/</PlatformRef.prototype.bootstrapModuleWithZone http://192.168.1.7:4200/vendor.bundle.js:48427:16 …/…/…/core/@angular/core.es5.js/</PlatformRef.prototype.bootstrapModule http://192.168.1.7:4200/vendor.bundle.js:48413:16 …/…/…/…/…/src/main.ts http://192.168.1.7:4200/main.bundle.js:146:1 webpack_require http://192.168.1.7:4200/inline.bundle.js:55:12 [0] http://192.168.1.7:4200/main.bundle.js:155:18 webpack_require http://192.168.1.7:4200/inline.bundle.js:55:12 webpackJsonpCallback http://192.168.1.7:4200/inline.bundle.js:26:23 <anonymous> http://192.168.1.7:4200/main.bundle.js:1:1`

Is there a workaround for this? Should I be dropping a-frame all together because I have a feeling there might be a lot more stuff like this?

[ngokevin]

i wouldn’t recommend angular for use with aframe

[ngokevin]

Yeah, sorry. Got to draw the line somewhere, and I can’t really recommend using Angular (or other heavy view frameworks) with A-Frame when it’s designed and optimized to be used standalone.