Troubleshooting @interopio/ng Initialization Issues in Angular 15+

io.Connect Browser
,
1

Problem

When initializing the @interopio/ng library using IOConnectNg.forRoot() directly in an @NgModule imports array e.g., in app.module.ts, intermittently get hard to pin down errors like:

  • "Cannot initiate glue, because this window was not opened or created by a glue client": this error occurs when the client app looks for a parent/opener window to send a “hello” message via the window.postMessage API and does not receive a response from the io.Connect Browser platform. There is a hardcoded 30-second timeout for this operation.
  • "IoConnect Browser has already been started for this application":this error occurs if there is a successful initialization and another one is started after that. It is thrown when the factory function is resolved and window.iobrowser.webStarted is already true.

Solution

The initialization pattern that uses IOConnectNg.forRoot() in an @NgModule imports array (typically in app.module.ts or main.module.ts) is intended for Angular 14 and earlier.

  1. For Angular 15 and later applications that use modules, use importProvidersFrom() in app.config.ts as in io.Connect Browser Documentation - Browser Client > Angular
  2. Upgrade to the latest @interopio/ng (version 6) and Angular >= 19. Refer to the updated example of our tutorial apps repo for proper usage - browser-tutorials/angular/solution at G4E-9122-Update-Angular-tutorial · InteropIO/browser-tutorials under the ‘app’ folder in clients/stocks/client-details.
  3. An alternative approach is to initialize the @interopio/browser JS SDK directly in your component’s ngOnInit() method instead of using the @interopio/ng package. The @interopio/ng package is a thin wrapper on top of the JS SDK intended to let you work the “Angular way”, but it is not mandatory. This approach is used often, including with older Angular versions, and can be easier to maintain and wrap in client SDKs.

@interopio/ng Version Compatibility

See the compatibility matrix here - io.Connect Browser Documentation - Browser Client > Angular