使用自定义Logger库遇Observable.Observable.of is not a function错误求助

你遇到的这个问题在rxjs 5.5.x版本里很常见，主要和模块导入方式、打包解析逻辑或者依赖一致性有关。咱们一步步来排查解决：

错误原因分析 #

从报错信息 TypeError: Observable.Observable.of is not a function 能看出来，代码在尝试访问 Observable 对象下嵌套的 Observable 属性的 of 方法，而不是直接调用 Observable.of。通常是这几个原因导致的：

• UMD格式打包的Logger库中，rxjs模块解析出现异常，使得Observable变量指向的是一个包含Observable类的对象，而非类本身
• 补丁式的操作符导入（import 'rxjs/add/observable/of'）被tree-shaking机制误删，没有成功挂载到Observable类上
• 项目中存在多个版本的rxjs实例，导致类的引用混乱

解决方案 #

方案1：改用直接导入of函数的方式 #

这是rxjs 5.5.x推荐的写法（也是rxjs 6+的标准用法），能彻底避免补丁式导入带来的问题：
修改你的LogConsole类代码：

import { of } from 'rxjs/observable/of';
import { LogPublisher } from './log-publisher.class';
import { LogEntry } from './log-entry.class';
import { Observable } from 'rxjs/Observable';

export class LogConsole extends LogPublisher {
    log(record: LogEntry): Observable<boolean> {
        console.log(record.buildLogString());
        // 直接使用of函数，它会返回符合类型要求的Observable<boolean>
        return of(true);
    }
}

这种方式不需要依赖补丁挂载，直接导入并使用of函数，逻辑更清晰也更稳定。

方案2：修复补丁式导入并防止被tree-shaking移除 #

如果你更习惯用Observable.of的写法，可以做以下调整：

1. 确保导入顺序正确，补丁导入必须在Observable导入之后：

import { Observable } from 'rxjs/Observable';
// 这个导入必须放在Observable之后，确保补丁能成功挂载到类上
import 'rxjs/add/observable/of';

export class LogConsole extends LogPublisher {
    log(record: LogEntry): Observable<boolean> {
        console.log(record.buildLogString());
        // 确认这里是Observable.of，不要误写成Observable.Observable.of
        return Observable.of(true);
    }
}

2. 防止tree-shaking误删补丁导入：
   在自定义Logger库的package.json中添加sideEffects配置，告诉webpack这些导入是有副作用的，不能被删除：

{
  "sideEffects": [
    "rxjs/add/observable/of"
  ]
}

如果是Angular CLI项目，也可以在angular.json的build配置中添加对应的sideEffects规则。

方案3：确保rxjs版本完全一致并清理依赖 #

虽然你提到库和应用的rxjs版本都是~5.5.0，但小版本差异也可能引发问题：

1. 运行以下命令检查项目中的rxjs依赖树，确保只有一个版本存在：

npm ls rxjs

2. 如果发现多个版本，删除node_modules和锁文件后重新安装：

rm -rf node_modules package-lock.json
npm install

这能确保整个项目使用同一个rxjs实例，避免类引用混乱的问题。

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