Integrating Angular Applications With Glue42 Is Now Easier Than Ever

Glue42 Core Integrates Angular Applications

Last month, we launched the industry-first open-source web integration platform Glue42 Core. We are now pleased to announce the release of the latest addition to our integration platform developer toolkit – the @glue42/ng NPM package. The library makes the integration of Angular applications in the Glue42 interoperability environment easier and aligns with the architectural guidelines of Angular.

Why do we need a Glue42 Angular Wrapper?

Out of the box, Glue42 interoperability in web applications can be consumed through the framework-agnostic Glue web library – all it takes is to instantiate a Glue object and subsequently use it wherever necessary. However, this approach does not scale very well across large and complex applications – thankfully, the Angular framework provides the necessary abstractions for a well structured, scalable architecture – the so-called Modules and Services.

Based on our experience, developers who integrate Glue42 in their Angular projects end up wrapping it in a Module / Service – so we decided to spend some extra effort and build and maintain that reusable part of the platform.

Glue42 Enterprise Compatibility

From the very beginning, we are designing Glue42 Core as a web-native counterpart of Glue42 Enterprise, reimagined within the constraints of the Web. Like everything else related to Glue42 Core, @glue42/ng is fully compatible with the Enterprise environment, making it possible for your apps to run and integrate both in the standard browser environment and in the Glue42 Desktop client with minimum effort/fork maintenance.

The Glue42Ng Module

The Glue42Ng Module is the initialization point and the place to optionally configure the Glue42 connection. In its simplest form, it looks like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Glue42Ng } from "@glue42/ng";
import GlueWeb from "@glue42/web";
  declarations: [
  imports: [
    Glue42Ng.forRoot({ factory: GlueWeb, holdInit: false })
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Afterward, you can inject the GlueStore in your code like this:

import { Component, OnInit } from '@angular/core';
import { Glue42Store } from '@glue42/ng';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent implements OnInit {
  constructor(private readonly glueStore: Glue42Store) { }

  public ngOnInit(): void {
    this.glueStore.glue.interop.register('multiply', (args) => args.arg1 * args.arg2 );

Get Started

To learn more about the capabilities and the usage of @glue42/ng, get started with the Angular tutorial section from our documentation. If you would like to share some feedback with us, open an issue in Github. Happy coding!

Photo of Petyo Ivanov
Author Details

Petyo Ivanov

Former Product Manager, Glue42

Petyo Ivanov, Glue42 Product Manager, took part in the open-source transformation journey of Glue42. Petyo comes from a software engineering background with a handful of successful open source initiatives in his timeline.

Related Posts

    Blog Article

The Next Generation of Desktop OS is Here. It’s Your Browser.

    Blog Article

Meet Glue42 Core: Our New Open-Source Web Application Integration Platform