Angular and createScript

Help & Support
1

Hello, All.

I’m trying to integrate playcanvas engine with angular framework (2+, not the old angular.js).

I’ve added playcanvas engine as dependency library.

"playcanvas": "file:../playcanvas_engine"

If any component or service need playcanvas, then it is imported as below.

import * as pc from 'playcanvas';

Things have been working fine until creating script entity.
image

As you can see from the above image, orbit-camera.js file can’t refer to playcanvas.

Is there anyone solved this problem?

Appreciate in advance…

2

Hi @sooyong_Kim,

Can you share some details on how you instantiate the pc.Application class and how you create/add scripts to entities in your code?

I am thinking it may have to do with the order things are happening there.

1 Like
3

I’ve created a sample project. You can check it out.

Thanks.

4

@Leonidas Anything I missed?

5

Hi @sooyong_Kim,

I’ve downloaded and compiled your project, so the problem is the PC library isn’t injected in the window context. It’s included in the vendor.js file, but isn’t accessible as a global object. If you open the browser and type pc that should normally show a reference to the library.

The orbit-camera.js script isn’t included in the TS repo, so it can’t take advantage of the import you do to find the pc reference, it requires the global reference.

Not sure what’ the official Angular fix is, but a quick fix is to exclude it from your NPM dependencies list and add it directly to your index.html (you will lose auto-completion on pc properties though).

image
image1340×634 47.1 KB

Or rework the orbit-camera.js script as an orbit-camera.ts script that has access to the pc import.

After you fix that you have a second error, your addOrbitScript() method tries to add a component to an undefined property, this.orbitCamera is undefined here, if it’s an entity you need to get a reference to it first:

  addOrbitScript() {
    this.orbitCamera = app.root.findByName('Camera');
    this.orbitCamera.addComponent('script');
1 Like
6

Hi,

@sooyong_Kim I have added successfully PC in an Angular project this way :

  • in angular.json, add in scripts PC file :
"scripts": [
    "node_modules/playcanvas/build/playcanvas.min.js",
]
  • for fixing TypeScript issues, i declare pc this way : declare const pc;
2 Likes