Angular 14项目执行ng serve时rxjs/operators导出错误求助

问题详情 #

使用Angular 14搭配Angular Material开发项目，执行ng serve时触发一系列rxjs操作符导出错误，具体报错信息如下：

./node_modules/@angular/core/fesm2020/core.mjs:31708:61-66 - Error: export 'share' (imported as 'share') was not found in 'rxjs/operators' (module has no exports)

./node_modules/@angular/forms/fesm2020/forms.mjs:1082:38-41 - Error: export 'map' (imported as 'map') was not found in 'rxjs/operators' (module has no exports)

./node_modules/@angular/material/fesm2020/autocomplete.mjs:630:36-45 - Error: export 'startWith' (imported as 'startWith') was not found in 'rxjs/operators' (module has no exports)

./node_modules/@angular/material/fesm2020/autocomplete.mjs:630:56-65 - Error: export 'switchMap' (imported as 'switchMap') was not found in 'rxjs/operators' (module has no exports)

./node_modules/@angular/material/fesm2020/autocomplete.mjs:635:38-42 - Error: export 'take' (imported as 'take') was not found in 'rxjs/operators' (module has no exports)

./node_modules/@angular/material/fesm2020/autocomplete.mjs:635:47-56 - Error: export 'switchMap' (imported as 'switchMap') was not found in 'rxjs/operators' (module has no exports)

./node_modules/@angular/material/fesm2020/autocomplete.mjs:757:82-88 - Error: export 'filter' (imported as 'filter') was not found in 'rxjs/operators' (module has no exports)

./node_modules/@angular/material/fesm2020/autocomplete.mjs:757:233-239 - Error: export 'filter' (imported as 'filter') was not found in 'rxjs/operators' (module has no exports)

./node_modules/@angular/material/fesm2020/autocomplete.mjs:758:4-7 - Error: export 'map' (imported as 'map') was not found in 'rxjs/operators' (module has no exports)

当前环境依赖版本 #

Node:16.20.0

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.12
@angular-devkit/build-angular   14.2.12
@angular-devkit/core            14.2.12
@angular-devkit/schematics      14.2.12
@angular/cdk                    14.2.7
@angular/cli                    14.2.12
@angular/language-service       14.2.0
@angular/material               14.2.7
@schematics/angular             14.2.12
rxjs                            7.5.7
typescript                      4.7.4

解决步骤 #

• 清理缓存重装依赖
  删除项目根目录下的node_modules文件夹和package-lock.json文件，然后执行npm install重新安装所有依赖；同时清理Angular缓存：ng cache clean --all

• 检查rxjs导入规范
  确认项目中所有rxjs操作符的导入符合v7版本要求，虽然rxjs/operators路径在v7中仍可用，但如果存在错误导入（比如拼写错误）也会触发问题。推荐v7+的导入方式：

  // 正确示例（部分操作符可直接从rxjs根导入）
  import { map, filter } from 'rxjs';
  // 或保留原路径写法
  import { map, filter } from 'rxjs/operators';
  

• 修复rxjs包完整性
  如果node_modules/rxjs文件夹存在文件缺失或损坏，手动删除后重新安装指定版本：

  rm -rf node_modules/rxjs
  npm install rxjs@7.5.7
  

• 调整rxjs版本至兼容范围
  Angular 14官方推荐的rxjs版本是^7.4.0，可以尝试升级到7.x系列的最新稳定版，或锁定到官方推荐版本：

  # 升级到7.x最新版
  npm install rxjs@latest --save
  # 或锁定到官方推荐的7.4.0
  npm install rxjs@7.4.0 --save
  

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