CODEWITHSUNDEEP
angularangular-cliaframe
d_z90
d_z90

Reputation: 1263

Can't import A-frame into component - Angular2

I have a project created with angular-cli where I have installed aframe via npm install aframe --save, and when I try to import it in the component via import 'aframe'; it causes the following error:

Failed to execute registerElement on Document: Registration failed for type a-node. A type with that name is already registered.

In this case, the only way to make it work is by importing the library in the <head> tag of the index.html file. Instead I would like to access aframe object3D to modify objects entities, as shown here:

AFRAME.registerComponent('foo', {
  init: function () {
    // Do something
  }
});

but unluckily I am not able to make it work. Do you have an idea on how to solve this issue? Thanks in advance for your replies!

Upvotes: 3

Views: 2560

Answers (1)

Ben Richards
Ben Richards

Reputation: 3575

Here is what you have to get it properly working in Angular2:

  1. Edit your angular-cli.json and add the path to the scripts node:
"scripts": [
  "node_modules/aframe/dist/aframe-master.js"
],

  1. Download the typings from https://github.com/devpaul/aframe-typings/blob/master/src/AFRAME.d.ts.

  2. Reference the typings in your component with:

/// <reference path="../typings/AFRAME.d.ts" />

or install the typings globally in your tsconfig.json:

"files": [
    "typings/AFRAME.d.ts"
  ]

Upvotes: 3

Related Questions