Unity WebGl in Angular

Prerequisites:

1 Angular App

2 Unity WebGl Build

Take your Unity WebGl Build UJLR

Copy the Build files in the angular project

src/assets/<buildfolder>

example : in my case
src/assets/UJLR

Create a angular component you want to load WebGl build

here i created app-unity

copy HTML code in the unity.component.html file.

<div id="unity-container" class="unity-desktop" #webglContainer>
    <canvas id="unity-canvas" width="960" height="600" tabindex="-1"></canvas>
    <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
            <div id="unity-progress-bar-full"></div>
        </div>
    </div>
    <div id="unity-warning"></div>
    <div id="unity-footer">
        <div id="unity-webgl-logo"></div>
        <div id="unity-fullscreen-button"></div>
        <div id="unity-build-title">My project (3)</div>
    </div>
</div>

now in unity.component.ts file

we will be writing code to load the WebGl build rather than using the webgl index.html to load the build.

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';

@Component({
    selector: 'app-unity',
    templateUrl: './unity.component.html',
    styleUrls: ['./unity.component.scss'],
})
export class UnityComponent implements OnInit, AfterViewInit {
    /**
     * take the Reference of the container.
     */
    @ViewChild('webglContainer') webglContainer: ElementRef;

    constructor() {}

    ngOnInit(): void {}
    ngAfterViewInit(): void {
        var buildUrl = 'assets/UJLR/Build';
        var config = {
            dataUrl: buildUrl + '/UJLR.data',
            frameworkUrl: buildUrl + '/UJLR.framework.js',
            codeUrl: buildUrl + '/UJLR.wasm',
            streamingAssetsUrl: 'StreamingAssets',
            companyName: 'DefaultCompany',
            productName: 'My project (3)',
            productVersion: '0.1.0',
            devicePixelRatio: 0,
        };

        let container = document.querySelector('#unity-container') || new Element();
        var canvas: HTMLElement = document.querySelector('#unity-canvas') || new HTMLElement();
        var loadingBar: HTMLElement = document.querySelector('#unity-loading-bar') || new HTMLElement();
        var progressBarFull: HTMLElement = document.querySelector('#unity-progress-bar-full') || new HTMLElement();
        var fullscreenButton: HTMLElement = document.querySelector('#unity-fullscreen-button') || new HTMLElement();

        if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
            // Mobile device style: fill the whole browser client area with the game canvas:

            var meta = document.createElement('meta');
            meta.name = 'viewport';
            meta.content =
                'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
            document.getElementsByTagName('head')[0].appendChild(meta);
            container.className = 'unity-mobile';
            canvas.className = 'unity-mobile';

            // To lower canvas resolution on mobile devices to gain some
            // performance, uncomment the following line:
            // config.devicePixelRatio = 1;
        } else {
            // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:

            canvas.style.width = '960px';
            canvas.style.height = '600px';
        }

        loadingBar.style.display = 'block';
        var script = document.createElement('script');
        script.async = false;
        script.type = 'text/javascript';
        script.src = 'assets/UJLR/Build/UJLR.loader.js';
        script.onload = () => {
            createUnityInstance(canvas, config, (progress: any) => {
                progressBarFull.style.width = 100 * progress + '%';
            })
                .then((unityInstance: any) => {
                    loadingBar.style.display = 'none';
                    fullscreenButton.onclick = () => {
                        unityInstance.SetFullscreen(1);
                    };
                })
                .catch((message: any) => {
                    alert(message);
                });
        };
        this.webglContainer.nativeElement.appendChild(script);
    }
}

now for every thing to work we need to add some configuration.

create a file. src/typings.d.ts

and add the createUnityInstance type.

declare function createUnityInstance(a: any, b: any, c: any): any;

in tsconfig.app.json

add typings.d.ts

it will look like this

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/app",
        "types": ["offscreencanvas"]
    },
    "files": ["src/main.ts", "src/polyfills.ts"],
    "include": [
        "src/**/*.d.ts",
        "typings.d.ts" // add this line
    ]
}

in angular.json file

project > architect > build > options > styles
add the
“src/assets/UJLR/TemplateData/style.css”
style file path of WebGl TemplateData file.

and

project > architect > build > options > scripts
add the
"src/assets/UJLR/Build/UJLR.loader.js"
loader file path of WebGl Build file.

for example it will look like this

with this configuration your unity Web Gl Build will load in the component.