Search code examples
angularphysijs

404 Error with PhysiJS in Angular

I am trying to get Physijs running with Angular. The Three Scene is working fine so far but I dont get any Physics effects.

I installed the following with npm:

https://www.npmjs.com/package/physijs-browserify

My corresponding Component.ts part for initializing Physijs looks as follows:

declare function require(name: string);
declare var THREE: any;
const Physijs = require('physijs-browserify')(THREE);
Physijs.scripts.worker = '/libs/physi-worker.js';
Physijs.scripts.ammo = '/libs/ammo.js';

I am always getting the following Error in the Chrome Console.:

physi.js:393 GET http://localhost:4200/libs/physi-worker.js 404 (Not Found)

I also tried the full path from the node_modules but that worked neither:

Physijs.scripts.worker = "../testproject/node_modules/physijs-browserify/libs/physi-worker.js"

The physi.js file at line 393 looks as follows:

this._worker = new Worker( Physijs.scripts.worker || 'physi-worker.js' );

I even tried to add the script in the .angular-cli.json but also that had not any effect:

"scripts": [
        "../node_modules/physijs-browserify/libs/physi-worker.js"
]

Am I doing something wrong in declaring the path to the physi-worker.js? Or could there be another problem? I am new to Angular and JavaScript so maybe it is an obvious issue.

I would appreciate your help a lot.

Greetings

Solution

  • The files are not available if they are not defined as an asset in the .angular-cli.json or they are located in the assets folder.

    So you have two possibilities:

    1. Put the files into the assets folder then your code should look like that:

      Physijs.scripts.worker = 'assets/physi-worker.js';
Physijs.scripts.ammo = 'assets/ammo.js';

    2. Add the folder that hosts the files to the assets configuration in the cli:

      "assets": [
"assets",
"favicon.ico"
"./node_modules/physijs-browserify/libs"
],

    I would prefer the first option.