使用VS2017 Community创建Angular 6 SPA时遇rxjs.merge错误求助

我帮你分析下这个问题——你在VS2017里创建Angular6 SPA遇到的这个错误，本质是RxJS版本升级带来的语法兼容问题：Angular 6配套的是RxJS 6+版本，而Visual Studio 2017默认的Angular模板可能还沿用了RxJS 5的旧写法，同时webpack vendor配置也没跟上版本变化。下面是一步步的解决方法：

1. 先通过兼容包快速修复 #

RxJS 6专门提供了rxjs-compat包来兼容旧代码，这是最快解决问题的方式。打开命令行，进入项目根目录执行：

npm install rxjs-compat --save

这个包会让原来的rxjs.merge这类旧写法继续生效，帮你先把项目跑起来。

2. 修复webpack vendor配置问题 #

你提到执行webpack --config .\webpack.config.vendor.js --mode development时也有问题，大概率是这个配置文件里的依赖引用没包含rxjs-compat。打开webpack.config.vendor.js，找到entry里的vendor数组，把rxjs-compat加进去：

entry: {
    vendor: [
        '@angular/core',
        'rxjs',
        'rxjs-compat', // 新增这一行
        // 其他已有的依赖...
    ]
}

修改完后重新执行webpack打包命令：

webpack --config .\webpack.config.vendor.js --mode development

3. 永久迁移到RxJS 6的新语法（可选） #

如果不想一直依赖兼容包，可以彻底把代码迁移到RxJS 6的新写法：

• 如果你是用merge来合并多个Observable（比如merge(obs1, obs2)），现在要从rxjs直接导入：

import { merge } from 'rxjs';

• 如果你是把merge作为管道操作符使用（比如在pipe()里），要从rxjs/operators导入：

import { merge } from 'rxjs/operators';
// 使用示例：source$.pipe(merge(anotherObs))

注意：如果是Angular核心代码内部报的错，那还是先靠rxjs-compat解决，等你把项目里的自定义代码都迁移完再考虑移除兼容包。

4. 清理缓存并重新构建 #

做完以上修改后，建议清理下缓存和依赖，避免遗留问题：

npm cache clean --force
rm -rf node_modules
rm package-lock.json
npm install

然后在Visual Studio里清理解决方案，重新生成项目；或者用命令行执行构建：

ng build

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