Botframework-WebChat在IE浏览器中无法正常工作的问题求助

我来帮你搞定这个IE兼容的问题，你遇到的两个现象其实是关联的，咱们一步步拆解：

1. 修复「无效流对象」的TypeError错误 #

这个错误本质是RxJS操作符在IE中的兼容问题，再加上项目缺少必要的Polyfill支持。

第一步：改用RxJS 6+的管道式操作符 #

Angular 6及以上版本默认用RxJS 6+，原来的链式.filter()写法已经不兼容IE了，得换成管道式写法，同时要导入对应的操作符：

// 先在文件顶部导入filter操作符
import { filter } from 'rxjs/operators';

ngOnInit() { 
  // 把原来的链式filter换成pipe包裹的filter
  this.directLine.activity$
    .pipe(filter(activity => activity.type === "event" && activity.name === "init"))
    .subscribe(activity => this.changeSize()); 

  BotChat.App({ 
    botConnection: this.directLine, 
    user: { id: 'user' }, 
    bot: { id: 'bot' }, 
  }, this.botWindowElement.nativeElement); 
}

第二步：补全IE必需的Polyfill #

IE不支持现代JS的很多特性，比如fetch、Observable这些WebChat和RxJS依赖的东西，你需要在polyfills.ts里添加这些内容：

// 基础ES6+特性的Polyfill
import 'core-js/es6/array';
import 'core-js/es6/observable';
import 'core-js/es6/promise';
import 'core-js/es6/function';
import 'core-js/es6/object';

// 给IE添加fetch支持（DirectLine依赖fetch发送请求）
import 'whatwg-fetch';

// 可选但推荐：支持ES7+的数组方法
import 'core-js/es7/array';

2. 让changeSize()方法正常触发 #

你改成directLine: this.directLine后WebChat能运行，但changeSize()没反应，是因为BotChat会自动创建一个新的DirectLine实例，你手动创建的this.directLine的activity$订阅根本收不到事件。所以必须坚持用botConnection参数，确保复用同一个实例。

另外，你用document.getElementById在IE里可能遇到DOM未完全渲染的问题，换成Angular的ViewChild更可靠：

// 新增一个ViewChild获取容器元素
@ViewChild("botChatContainer") botContainerElement: ElementRef;

changeSize(){ 
  console.log("here");
  // 用ViewChild获取元素，避免IE下DOM查询的兼容性问题
  this.botContainerElement.nativeElement.classList.add("fullSize"); 
}

记得在模板里给容器加上#botChatContainer标记：

<div id="bot-chat-container" #botChatContainer></div>

最后验证一下 #

1. 重新编译项目：ng build --prod（生产环境下Polyfill才会完全生效）
2. 打开IE测试，看控制台有没有报错
3. 触发机器人的init事件，检查控制台是否输出"here"，容器是否加上了fullSize类

内容的提问来源于stack exchange，提问作者Schwammy