device.watchAdvertisements() is not a function. Web Bluetooth(chrome)

I am currently trying to implement a webpage that will watch for the advertisements for any connected bluetooth devices.

I am following this example from the google chrome samples. Which is working on their webpage.

However when I run my code (copied from the example, but just in case its posted below) I get the "device.watchAdvertisements is not a function".

I was hoping someone could point me in the right direction as my only guesses are that:

A) I need to wait for chrome 87 (I have 86.0.4240.183 with the recommended flags enabled)

B) I am missing a library or import

C) User error (the most likely)

Here is my code; for context it is an angular 6 application:

onWatchAdvertisementsButtonClick() {
  console.log('Requesting any Bluetooth device...');
  this.mobileNavigatorObject.bluetooth.requestDevice({
      // filters: [...] <- Prefer filters to save energy & show relevant devices.
      acceptAllDevices: true
    })
    .then(device => {
      console.log('> Requested ' + device.name);

      device.addEventListener('advertisementreceived', (event) => {
        console.log('Advertisement received.');
        console.log('  Device Name: ' + event.device.name);
        console.log('  Device ID: ' + event.device.id);
        console.log('  RSSI: ' + event.rssi);
        console.log('  TX Power: ' + event.txPower);
        console.log('  UUIDs: ' + event.uuids);
      });

      console.log('Watching advertisements from "' + device.name + '"...');
      return device.watchAdvertisements(); //<--- This throws a typeError
    })
    .catch(error => {
      console.log('Argh! ' + error);
    });
}

Edit (Solved): So it seems to be an SSL or environment issue. Something with my project configuration in debug was not agreeing with the watchadvertisements() function. The issue went away after publishing my code to the iis server.