Capacitor/core Browser plugin acts different when built for production

I am working on an app that primarily focuses on consolidating and making the navigation of a number of website much smoother and quicker. I have use the side menu and with each item in the menu is a page that makes a call to load a different web page. Example of TS file below. I am importing Plugins from @capacitor/core and using the browser plugin.
I run
ng build --prod
ionic cap sync android
ionic cap open android.

From here if i run the code, the debug apk will run as expected on the simulator or on a number of devices. When a user clicks on one of the links to a website, chrome will open it up in the app (think gmail is a good example of this similar action).
After building a production apk, this functionality is lost and a new window opens up chrome itself. Has anyone came across this and know why it would change between the debug and building a prod app for the playstore?
Thanks

import { Component, OnInit } from '@angular/core';
import { Plugins } from '@capacitor/core';

const { Browser } = Plugins;

@Component({
  selector: 'app-search',
  templateUrl: './search.page.html',
  styleUrls: ['./search.page.scss'],
})
export class SearchPage implements OnInit {

  constructor() {
    Browser.addListener('browserPageLoaded', () => {
      console.log('browserPageLoaded event called');
    });
    Browser.addListener('browserFinished', () => {
      console.log('browserFinished event called');
    });
    Browser.prefetch({
      urls: [
        'https://google.com',
        'https://yahoo.com/'
      ]
    });
  }

  async openGoogle() {
    await Browser.open({ toolbarColor: '#41b883', url: 'https://google.com' });
  }
  async openYahoo() {
    await Browser.open({ toolbarColor: '#41b883', url: 'https://yahoo.com' });
  }
  ngOnInit() {
  }
}