WebGL, Angular, iframes and unloading

I'm not an Angular master, but I'm building an Angular website where Unity is embedded, only on certain pages. I also need to send some data between Angular and Unity. Unity loads, communication works (loading specific assetbundles and images) and calls from Unity reach the Angular methods I specified.

I'm trying to unload Unity and can't get it to work (The audioclip inside Unity still plays). After searching the web I have found a few possible solutions - apparently an iframe is the key. But I don't have any luck getting it to work. So far I've tried:

- Using Renderer2 to create an iframe, setting body innerHTML to the unitydiv and loading unity - removing iframe on unload
- Having an iframe inside the component template - setting src to an empty html file on unload.

I'm trying to load and unload Unity on tab change (mat-tab-bar). I also tried to place the tab content outside of the mat-tab-bar to test if the tabchange messes up the dom (same result).

All methods result in either no iframe in the dom, or an empty iframe (using Chrome devtools to check) - but the Unity build is still active.

Any suggestions?

Current setup:

unitywebgl.component.html

Code (HTML):

1. <div id="unityIFrame" #unityFrame>
2.    <iframe id="iframe" src="../data/unity.html"></iframe>
3. </div>

unitywebgl.component.ts

Code (JavaScript):

1. //pardon my code
2.  
3. [..] // angular component stuff
4.  
5. @Input("buildpath") buildpath: string;
6. @Input("buildname") buildname: string;
7. @ViewChild("unityFrame") unityFrameHolder;
8.  
9. //called by parent component on tab change
10. loadUnity() {
11.    // binding stuff for communication
12.    window.[namespace].somemethod = this.somemethod.bind(this);
13.    window.[namespace].othermethod = this.othermethod.bind(this);
14.    [...] // even more bindings
15.  
16.    //script and content paths
17.    let loaderPath = this.buildpath + "/Build/UnityLoader.js";
18.    let buildPath = this.buildpath + "/Build/" + this.buildname + ".json";
19.  
20.    //also tried to create this iframe instead of settings the src, setting body to the unitydiv instead of pointing towards an html file etc..
21.    //set iframe to unity
22.    this.iframe = this.unityFrameHolder.nativeElement.children[0];
23.    this.iframe.src = "../data/unity.html";
24.  
25.    let go = iframe.contentDocument.getElementById("gameContainer");
26.    //set namespace to iframe as well
27.    this.iframe.contentWindow.[namespace] = window.[namespace];
28.  
29.    //load unity
30.    $.getScript(loaderPath).done(function (bla, text) {
31.       window.[namespace].Unity.Instance = UnityLoader.instantiate(go, buildPath);
32.    });
33. }
34.  
35. //also called by parent component on tab change
36. unloadUnity(){
37.    this.iframe.src = "../data/empty.html";
38.    //also tried removing iframe, setting body to emty, setting src to empty
39. }
40.  
41. somemethod(){
42.    //this works
43.    window.[namespace].Unity.Instance.SendMessage([...stuff...]);
44. }
45.  
46. othermethod(){
47.    //also works
48.    console.log("Got signal from unity to do stuff");
49. }
50.  
51.  

 

Hi, I am also trying to get a unity webGL build to run inside an Angular component. Did you manage to get this set up? Would you mind sharing with me how you did it please? I am new to both Angular and Unity. Thanks

 

Hello.
I recently managed to make an Angular component for my unity wasm webgl html5 build.
Im using Unity 2020.1.4f and Angular 9:
1) Import the JS loader into your component by first, adding it to the angular.json-> scripts list. (Since 2020, this Loader is specific to each project and, if you so choose, it strips the code from unused classes. But now, there is not a generic name (before it was UnityLoader.js) Now it has the name of the project.
2)Put the .wasm, the .data, and the framework.js from the build in the assets folder of the Angular app.
3)On the html of the component, have a canvas with id="unity-canvas", with width and hight equal to those of your build.
4) On the component, import the createUnityInstance with the line:
declare var createUnityInstance;

5) Implement the ngOnInit(): void method, and inside it, run the function you just imported like this:

this.gameInstance = createUnityInstance(document.querySelector("#unity-canvas"), {
dataUrl: "assets/[PROJECT_NAME].data",
frameworkUrl: "assets/[PROJECT_NAME].framework.js",
codeUrl: "assets/[PROJECT_NAME].wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "[NAME_OF_THE_COMPANY]",
productName: "[NAME_OF_THE_PRODUCT]",
productVersion: "0.1",
});

Voila!