[SOLVED] How to register soft-navigation changes in mPulse Boomerang for an Angular app?

How to register soft-navigation changes in mPulse Boomerang for an Angular app?

The BOOMR.plugins.Angular plugin seems to be used for AngularJS 1.x and so far I failed to find a Angular example or plugin I could use. Based on the docs I came up with the following solution:

@Injectable()
export class BoomerangBootstrapService implements OnAppInit {
    constructor(private router: Router) {}

    onAppInit() {
        const boomr = window['BOOMR'];
        const callbacks = {};

        this.router.events.subscribe((e) => {
            if (!boomr) {
                return;
            }
            if (e instanceof NavigationStart) {
                boomr.plugins.SPA.last_location(e.url);
                const callback = () => {
                    boomr.plugins.SPA.markNavigationComplete();
                };
                callbacks[e.url] = callback;
                boomr.plugins.SPA.route_change(callback, []);
            } else if (e instanceof NavigationEnd || e instanceof NavigationCancel || e instanceof NavigationError) {
                const callback = callbacks[e.url];
                if (callback) {
                    callback();
                    delete callbacks[e.url];
                }
            }
        });
    }
}

When I insert a helper diagnostics script using the browser console to debug the calls I can see that the registration is correct but I don't see any data being submitted on navigation.

diagnostics script:

(function(spa) {
  'use strict';
  var rc = spa.route_change;
  var ll = spa.last_location;
  var cm = spa.markNavigationComplete;

  spa.last_location = function(url) {
    console.log('last route url was ' + url);
    ll(url);
  };

  spa.route_change = function(c, o) {
    console.log('route_change start');
    rc(c, o);
  };

  spa.markNavigationComplete = function() {
    console.log('route_change completed');
    cm();
  };
})(window.BOOMR.plugins.SPA);

Am I doing something wrong? Do I need to create a custom plugin or call additional methods? Could you point me to a working code example or plugin git project?

Solution