Call in an Angular2 component

Help & Support
1

can you please explain step by step how to include the playcanvas script in an Angular 2 component?

if i simply include the scripts in the head and two scripts start.js and loading.js in the component, the canvas starts correctly the first time but whe i open the view the second time i have lot of errors:

script registry already has 'boundingBoxShape' script, define 'swap' method for new script type to enable code hot swapping

script registry already has 'boundingSphereShape' script, define 'swap' method for new script type to enable code hot swapping

script registry already has 'shapePicker' script, define 'swap' method for new script type to enable code hot swapping

[and other errors like those]
2

Can you explain a bit more what you’re trying to do? Those errors mean that you are trying to add those scripts to the script registry again which probably means that your playcanvas application still exists in the background I’m guessing.

1 Like
3

i want to implement the playcanvas javascript code in my angular2 web application. Can you kindly give some examples about where/how insert this code?

Now i have included this in the index head:


    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="manifest" href="manifest.json">
    <script src="playcanvas-stable.min.js"></script>
    <script>
        ASSET_PREFIX = "";
        SCRIPT_PREFIX = "";
        SCENE_PATH = "xxx.json";
        CONTEXT_OPTIONS = {
            'antialias': true,
            'alpha': true,
            'preserveDrawingBuffer': false,
            'preferWebGl2': true
        };
        SCRIPTS = [ xx, xx, xx, xx, xx, xx, xx, xx, xx];
        CONFIG_FILENAME = "config.json";
        pc.script.legacy = false;
    </script>

and this in my angular2 component:

       var s = document.createElement("script");
       s.type = "text/javascript";
       s.src = "__start__.js";
       this.elementRef.nativeElement.appendChild(s);
  
       var t = document.createElement("script");
       t.type = "text/javascript";
       t.src = "__loading__.js";
       this.elementRef.nativeElement.appendChild(t);

it works when i open the view the first time, but the second time i have those errors because, as you say, the aplication still exists.
can you please explain step by step how to include the playcanvas script in an Angular 2 component?

4

I don’t really know how Angular 2 works. But what I’m guessing is that you are loading this view which re-includes the __start__.js and __loading__.js scripts. You could either not do that and include those scripts in the head of your page once, or make sure that when you’re leaving the view you destroy the existing application.

1 Like
5

perfect, i’ll try to destroy.
another error that i have occasionally is:

Uncaught TypeError: Cannot read property 'on' of null
    at __loading__.js:107
    at Object.createLoadingScreen (playcanvas-stable.min.js:791)
    at __loading__.js:1

code at 107 row:

    app.on('preload:end', function () {
        app.off('preload:progress');
    });

I think is also linked with angular. Does not happen always, i think only when the “app” is not yet created. Do you have any suggestions?

6

Could be racing condition of what is loaded first and later. You would need to ensure that loading order of scripts is consistent.

1 Like
7

You don’t have to use the __start__.js and __loading__.js scripts if you’re self hosting this. You could just read the code in those files so you get what’s going on and handle the app creation / destruction yourself where it suits you.

1 Like
8

@vaios @max how can i destroy the “app”? i tried with:

window["app"].destroy();

but is not working

9

app.destroy(); should do it. What is not working exactly?

10

if i call app.destroy(); or window["app"].destroy(); when i leave the view i get lots of

TypeError: Cannot read property ‘syncHierarchy’ of null

11

Is it possible for you to host your application somewhere and post a link here? It’s really hard to figure out what’s wrong with some arbitrary angular application without looking at some code :slight_smile:

Alternatively you could zip everything up and PM me a link so I can download it and try it locally.

12

solved embedding as iframe in my angular view