Webchat is not rendering on IE 11 starting v4.10.0

Screenshots

Version

WebChat CDN v.4.10.1 Asp.Net Core 3.1 Angular 10 IE 11

Describe the bug

Wen the chatbot is deployed as an Azure Web App, the chatbot does not render on IE 11 and shows white page (please see the image provided above), but It renders in my local machine. The left window is the azure app and right window is my local. There are no errors under the console. The application is using es5 polyfill of webchat (https://cdn.botframework.com/botframework-webchat/4.10.1/webchat-es5.js). The WebChat works on all other browsers fine in Azure or local.

Now, in the left image under the console window we can see that webchat posted an activity which is an event to trigger bot’s welcome message. This is send when store middleware gest DIRECT_LINE/CONNECT_FULFILLED message. It appears that webchat framework is responding but it is not rendering on Azure.

 const store = this.webChat.createStore({}, () => next => action => {
   this.processAction(action);
   return next(action);
 });

  processAction(action) {
    if ('DIRECT_LINE/CONNECT_FULFILLED'.equalsTo(action.type)) {
      // When we receive DIRECT_LINE/CONNECT_FULFILLED action, we will send an event activity using WEB_CHAT/SEND_EVENT
      this.directLine.postActivity({
        from: { id: this.user.id, name: this.user.name },
        name: 'webchat/join',
        type: 'event',
        value: 'token'
      }).subscribe(
        id => console.log(`Posted activity, assigned ID ${id}`),
        error => console.log(`Error posting activity ${error.message}`)
      );
    }
    else if (this.showSpinner && 'WEB_CHAT/SET_SUGGESTED_ACTIONS'.equalsTo(action.type)) {
      // The welcome message is shown, hide the spinner.
      this.showSpinner = false;
    }
  }

[v-kydela]

@arman-g - I have reproduced your issue using the code you’ve just uploaded. All you must do to fix the problem is to make sure your page contains the appropriate CSS, as seen in the sample I linked to:

    <style>
      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
      }

      #webchat {
        height: 100%;
        width: 100%;
      }
    </style>

It seems the latest version of Web Chat will not render if it has no height attribute.

Does this resolve your issue?

[v-kydela]

@arman-g - I feel like Angular may be the culprit here. Can you try taking that Web Chat code out of the Angular component and testing it in an HTML script element directly? You can follow the samples for help with that.

Also, you still have arrow functions in your call to subscribe. I think it may be a bad idea to call directLine.postActivity before the connection has been fulfilled anyway.