How to receive message from postMessage when using window.open

First of all I know this question has been asked already in differently ways but I've combed through all the questions on stackoverflow and tried their examples but nothing is working for me.

I can not receive a message from the popup even though when I try to check for opener it exist on the popup window. The parent window where I am receiving the message from the popup does not receive anything. It ignores receiveMessage.

Parent Window

openSignInWindow = (url: any, name: any) => {
    let _url = this.baseUrl + `user/account/login/${url}`;
    // remove any existing event listeners
    window.removeEventListener('message', this.receiveMessage);
    // window features
    const strWindowFeatures = 'toolbar=no, menubar=no, width=600, height=700, top=100, left=100';

    if (this.windowObjectReference === null || this.windowObjectReference.closed) {
      /* if the pointer to the window object in memory does not exist
    or if such pointer exists but the window was closed */
      this.windowObjectReference = window.open(_url, name, strWindowFeatures);
      window.focus();
    } else if (this.previousUrl !== _url) {
      /* if the resource to load is different,
    then we load it in the already opened secondary window and then
    we bring such window back on top/in front of its parent window. */
      this.windowObjectReference = window.open(_url, name, strWindowFeatures);
      this.windowObjectReference.focus();
    } else {
      /* else the window reference must exist and the window
    is not closed; therefore, we can bring it back on top of any other
    window with the focus() method. There would be no need to re-create
    the window or to reload the referenced resource. */
      this.windowObjectReference.focus();
    }

    // add the listener for receiving a message from the popup
     addEventListener('message', event => this.receiveMessage(event), false);
    // assign the previous URL
    console.log('Listener Called', _url);
    this.previousUrl = _url;
  };

 receiveMessage(event) {
    this.cd.detectChanges();
    alert('HELLO');
    console.log('Receiver called')
    // Do we trust the sender of this message? (might be
    // different from what we originally opened, for example).
    if (event.origin !== window.location.origin) {
      return;
    }
    const { data } = event
    // console.log(data)
    // console.log(data.source === 'internal-redirect')
    if (data.source === 'internal-redirect') {
      sessionStorage.setItem('access_token', data['access_token']);
      sessionStorage.setItem('fullname', data['fullname'])
      this.authService.logged_in_user = data['fullname'];
      this.username.emit(true);
      const redirectUrl = '/';
      window.location.pathname = redirectUrl;
    }
  };

Popup page

  const params = window.location.search;
   if (window.opener) {
     // send them to the opening window
     window.opener.postMessage(params);
     // close the popup
     window.close();
   }