IFrame sometimes not working in IE11

Question

I have develop a web application using Angular 5 from which I load an Iframe. After deployment to IIS Iframe contents works perfectly fine in Google chrome, but in IE11 sometimes it works and sometimes not.

But it works fluidly when development tools (F12) in IE is on. What seems to be the problem?

Thanks in advance.

Here is my code in html component:

<iframe name="encode" [src]="trustedUrl"
style="height: 100%; width: 100%; min-height: 500px;" 
frameborder="0" scrolling="yes" 
id="iframe"></iframe>

And here is the Typescript code:

  ngOnInit(): void {
    this.empNo = localStorage.getItem('currentUser'); 
    this.settingsUrl = 'http://phlsvr500:81/csauthor#/settings/' + this.empNo;
    this.trustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.settingsUrl);
  }

Answer 1

I have figured out by revising below code: this.settingsUrl = 'http://phlsvr500:81/csauthor/#/settings/' + this.empNo; notice the additional / before #.