Overview

The @interopio/ng library provides modules and services for the io.Connect JavaScript libraries - @interopio/browser and @interopio/browser-platform, if you are working on an io.Connect Browser project, or @interopio/desktop, if you are working on an io.Connect Desktop project. This wrapper provides easy access to the io.Connect functionalities and facilitates using the io.Connect APIs in your Angular apps.

Prerequisites

This package should be used only in Angular apps. If your app was created with the Angular CLI, then you don't need to take any additional steps. Otherwise, make sure to install the peer dependencies of @interopio/ng described in the package.json file of the library.

⚠️ Note that @interopio/ng v4 supports Angular 14+, while @interopio/ng v3 supports Angular 7-15 (inclusive).

The following example assumes that your app was created with the Angular CLI. Install the @interopio/ng library:

npm install --save @interopio/ng

Usage

The following examples demonstrate initializing the @interopio/ng library for an io.Connect Desktop project.

ℹ️ For more details on using the @interopio/ng library in io.Connect Desktop and io.Connect Browser projects, see the io.Connect Desktop and io.Connect Browser official documentation respectively.

Angular 15 and Later

In your app.config.ts file:

import { importProvidersFrom } from "@angular/core";
import { provideRouter } from "@angular/router";

import { routes } from "./app.routes";
import { IOConnectNg } from "@interopio/ng";
import IODesktop from "@interopio/desktop";

export const appConfig = {
    providers: [
        provideRouter(routes),
        importProvidersFrom(
            IOConnectNg.forRoot({ desktop: { factory: IODesktop }})
        )
    ]
};

In your main.ts file:

import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, appConfig)
    .catch((err) => console.error(err));

Angular 14 and Below

Import the IOConnectNg module in the root module of your app and pass an io.Connect factory function:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { IOConnectNg } from "@interopio/ng";
import IODesktop from "@interopio/desktop";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        IOConnectNg.forRoot({ desktop: { factory: IODesktop } })
    ],
    providers: [],
    bootstrap: [AppComponent]
});

export class AppModule { };