4

I have a Node.js Angular app which I am trying to import babylon.js into.

Current Setup

1) npm install --save babylonjs to get the npm repo installed in my project's node modules.

The following image depicts the folder structure of the npm repo. enter image description here

2)In my angular component I import the BABYLON declaration from the babylon.module.d.ts and babylon.max.js files in the above picture like so.

import * as BABYLON from 'babylon.js'

Babylonjs now works great, has typings enabled and everything, so I can use BABYLON as pictured below enter image description here

Problem

None of the included extensions are hooked up. These extensions are located in the following folders

(Full folder structure is in the first image. I left the gui folder open since that is the specific extension I am >trying to activate at this time)

enter image description here

The main babylon.module.d.ts file defines BABYLON as follows:

declare module BABYLON { //class types are defined in here }

The gui extension (all others follow the same logic) declares itself as a part of BABYLON as follows:

declare module BABYLON.GUI { //extend classes & create new classes in here in here }

Attempted solutions

1) babylon.gui.d.ts declares BABYLON.GUI so I simply tried the following

import * as BABYLON from 'babylonjs';
import * as BABYLON.GUI from 'babylonjs/dist/preview release/gui/babylon.gui';

This generates the following Typescript error: Duplicate identifier 'BABYLON', which is not surprising, however, BABYLON.GUI is how thebabylon.gui.d.ts` file declares its parts.

2) Using the CDN in the index.html file. This works, however, types will not work. Even if I got typings to work,using the CDN is less performant. The resources will be loaded in the document <head> every page. with imports the resources will only be queried when the component is active.

3) Appending the babylon.gui.d.ts file to the babylon.module.d.ts file. BABYLON.GUI` is still undefined.

Modifications to the npm repo are undesireable anyways, since any npm updates, or installs will overwrite the changes.

4) I spoke with a BABYLON developer here, and we kind of hit a dead end.

Does anyone have any input on how to import this extension properly?

PS. once we get this answered I'm going to work with the dev to implement a seamless experience for all node users who wish to incorporate babylon.js into their projects!

Chris Haugen
  • 825
  • 1
  • 7
  • 22
  • I had a similar issue but it was due to the fact that I had not excluded node_modules from my tsconfig file. Have you tried excluding that and `types` from your compiler config? Also, in your tsconfig file, what import system are you using? most people just go with commonJs, but it would be interesting to know – Jay Jul 28 '17 at 15:45

1 Answers1

0

I spoke with the lead developer deltakosh about this.

To clear a few things up:

  1. This issue is not with npm
  2. This issue is not with node
  3. This issue is with how Babylon is structured
  4. The developers are actively refactoring to support the import behavior desired in the above question.

If anyone is curious here is the link to the open issue on github pertaining to this question.

In the interim to use Babylon while import support for importing packages is being worked on I have done the following:

Use the CDN for all babylon libraries

To get rid of typescript compilation issues declare the following at the top of your .ts file declare let BABYLON: any; This will make babylon with packages useable, however, we will not have any typings benefits in the interim.

Feel free to chime in if you have found a more elegant interim solution!

Chris Haugen
  • 825
  • 1
  • 7
  • 22