Module Federation微前端架构下RxJS switchMap与Appcues脚本冲突问题求助

各位开发者朋友好，我最近在做Angular+Module Federation微前端项目时，碰到了一个诡异的兼容性问题，折腾了好几天没搞定，想请教下大家的思路🙏

背景说明 #

我们的项目采用Module Federation实现微前端架构，最近需要集成Appcues这个第三方工具——它主要用来做用户登录追踪和网页横幅展示。我是通过动态注入脚本的方式把它加到其中一个微前端里的，代码如下：

const script = document.createElement('script');
script.async = true;
script.id = 'appcues';
script.src = 'https://fast.appcues.com/Id_Value.js'; // 示例地址
document.body.appendChild(script);

问题现象 #

这个问题不是加载脚本后立刻出现的，而是有特定触发条件：

1. 在加载了Appcues脚本的微前端页面操作时一切正常
2. 跳转到其他微前端页面，操作那些用到RxJS switchMap的组件时，就会抛出错误：

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

3. 再切回加载了Appcues的微前端，错误又消失了

举个我们项目里用switchMap的示例代码：

public addHandler(address: ValidatedAddress): void {
        this.sub.add(
            this._AddressService
                .getAddressById(address)
                .pipe(
                    switchMap((existingAddress) => {
                        if (existingAddress) {
                            return of(existingAddress);
                        }
                        return this._AddressService.addValidatedAddress(address);
                    })
                )
                .subscribe({
                    next: (newAddress: ValidatedAddress) => {                       
                        this.saveAddress(newAddress);
                    },
                })
        );
    }

已尝试的解决办法 #

我已经试过几种思路，但都没解决问题：

• 确保脚本是异步加载的，并且做了加载错误检查
• 延迟加载Appcues脚本，等其他初始化操作完成后再注入
• 用Angular的NgZone来隔离脚本加载，避免影响Angular的变更检测

我的猜测 #

我怀疑是Appcues脚本修改了全局环境里的某些变量，或者干扰了JavaScript事件循环的处理逻辑，导致RxJS的Observable流处理出了问题——毕竟错误提示是“提供了无效对象，期望是流”，很像是全局的RxJS相关对象被篡改了？

想请教大家的问题 #

1. 有没有同学碰到过Appcues或者其他第三方脚本干扰RxJS的情况？
2. Appcues和RxJS在Module Federation微前端架构下有没有已知的兼容性问题？
3. 有没有什么办法能把第三方脚本的影响隔离起来，不让它干扰主应用的RxJS逻辑？

如果有任何思路或者经验分享，都非常感谢！

备注：内容来源于stack exchange，提问作者Enzo Sambucetti