Skip to main content

Angular + signageOS JS SDK

This guide describes how to use signageOS JS SDK with existing Angular application.

info

This example is for Angular v18.

Prerequisites​

Projects changes​

Following are Angular-specific changes you need to make to use signageOS JS SDK in your project.

Add signageOS to your application​

To use the features we offer you need to add signageOS dependencies to the project. @signageos/front-applet is a library that includes signageOS JS SDK and APIs.

npm i -SE @signageos/front-applet

Adjust your package.json​

package.json has to include two key items: main and files.

main defined the location of the starting file of your application. Typically it's located in dist/index.html.

files lists all folders and files to include while uploading your application to signageOS.

Below is a sample json from Angular boilerplate project project-coconut:

package.json
{
  "name": "your-cool-app",
  "version": "1.0.0",
  "main": "dist/project-coconut/browser/index.html",
  "files": [
    "dist/project-coconut/browser"
  ],
  ... //the rest of package.json

Change base path in index.html​

In your index.html file adjust the href attribute of <base> element to relative path. Applet is served from device`s internal file system and the absolute path is different to every platform. Always use relative paths in your project to avoid issues.

<!-- 
change the following element
<base href="/">
to
-->
<base href="./">

Add front-applet to app.components​

Start by importing @signageos/front-applet to your app.components.ts file:

src/app/app.components.ts
import sos from "@signageos/front-applet";

Followed by mandatory initialization:

Initializing signageOS JS SDK
export class AppComponent {
    title = 'project-coconut';
    public sosIsReady: boolean = false;

    public ngOnInit(): void {
        this.initSos();
    }

    private initSos(): void {
        sos.onReady().then( function() {
            console.log("Ready to rock");
            this.sosIsReady = true;
        });
    }
}

You can start using sos library in your code after this initialization.

Uploading Applet to signageOS​

Once your local development is completed, upload your Applet to signageOS. Uploaded Applet can be deployed to devices directly or you can generate your native deployment app.

sos applet upload

You will be asked for Organization, under which you want to upload your Applet and final confirmation.

Deployment guides