Observable.subscribe() not working in IE on component change in Angular 7

Question

I have two HTML buttons 'previous' and 'next'. I have different tabs (components) to which I navigate to using these buttons. The code works as expected in Chrome and Firefox but it gives a blank screen when clicking next and previous buttons in IE or Edge.

'next' button event handler:

saveAndNextClick(form: FormGroup, section: string) {
  this.markFormGroupTouched(form);
  if (form) {
    if (section === 'lastsection') {
      this.sectionChangeService.change('schoolSection');
    } else {
      this.hideShowTabSection();
      this.selectedSectionGroup[section] = false;
    }
  }
  this.saveData(); 
  this.saveService.saveQuestion();
}

Template

<div class="d-flex app-question-navigation justify-content-between">
  <a class="btn btn-secondary buttonSize (click)="previousClick(appSectionThree,'sectionTwo')">
    Previous
  </a>
  <span class="app-question-pagination">Section 3 of 8</span>
  <a class="btn btn-secondary buttonSize" (click)="saveAndNextClick(appSectionThree,'sectionFour')">
    Next
  </a>
</div>
</form>

component.ts

ngOnInit() {
  this.sectionChangeService.listen().subscribe((message: any) => {
    if (message.text === 'prvsparentdemosection') {
      this.saveAndNextClick(this.pdemographicsSectionFive, 'sectionFour');
    }
  });
}

Service:

```typescript
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })

export class SectionChangeService {
  private listner = new Subject<any>();

  change(message: string) {
    this.listner.next({ text: message });
  }

  clearListner() {
    this.listner.next();
  }

  listen(): Observable<any> {
    return this.listner.asObservable();
  }
}

Answer 1

Try using polyfills, they are necessary for IE & Edge because they lack some es6/7 functions

Import this in the polyfills.ts file

import 'core-js/es7/array';
import 'core-js/es7/object';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';`