Right now, the task at hand is quite challenging.
I attempted it with AngularCli by creating a new project using ng new and following these steps:
ng new kframetest
Installed aframe and aframe-template-component using:
npm install aframe aframe-template-component --save
Since both (zone.js and A-frame) utilize attributeChangedCallback, A-frame needs to be loaded before zone.js. Therefore, I added the following lines in the polyfills.ts file:
import 'aframe';
import 'aframe-template-component';
Inserted just before import 'zone.js/dist/zone';
Created a basic component using the kframe sample as a template.
To allow Angular to process special HTML tags like <a-entity>, you must include CUSTOM_ELEMENTS_SCHEMA and NO_ERRORS_SCHEMA in the NgModule utilizing the schemas property:
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
Proceeded to run the application.
Now, when checking the console, A-frame should be running:
Insert the A-Frame script tag above the scene in the HTML prior to use to ensure proper registration for A-Frame before being utilized 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
The main issue arises from Angular attempting to interpret the aframe template syntax within the HTML, leading to these 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. Ensure correct spelling of the property name and listing all directives in the @NgModule.declarations.
</a-assets>
I have explored options to add HTML without Angular parsing it, but so far have not found a solution...
I attempted adding the template directly to the index HTML, which seemed to work, although I understand that may not be the preferred approach.
You can access the code here: