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

Question

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?

Answer 1

There is no need now to instrument anything in your Angular app. From Boomerang version 1.632 all SPAs are supported with simply checking the

Enable Single Page App (SPA) monitoring

Docs available here

https://developer.akamai.com/tools/boomerang/?language=en_US?language=en_US#single-page-apps