Angular外部组件库共享NgRx StoreModule遇R3InjectorError问题求助

开发Angular应用时，外部组件库依赖宿主应用的NgRx Store，本地同一项目内运行正常，但放在外部文件夹时出现以下错误：

ERROR NullInjectorError: R3InjectorError(AppModule)[Store -> Store]: 
  NullInjectorError: No provider for Store!

奇怪的是，将组件库dist文件复制到本地路径后可正常运行，仅外部路径配置失效。

问题根源 #

当组件库位于外部文件夹时，Angular可能会从组件库自身的node_modules加载NgRx Store模块，而非复用宿主应用的实例，导致出现重复的Store模块实例——组件库无法识别宿主应用中已初始化的Store提供者。而复制dist到本地时，组件库会自动复用宿主的node_modules依赖，避免了重复加载问题。

解决方案 #

1. 组件库将NgRx设为peer依赖

修改组件库的package.json，把@ngrx/store移到peerDependencies，强制组件库使用宿主应用的NgRx实例：

{
  "name": "test-lib",
  "peerDependencies": {
    "@ngrx/store": "^16.0.0", // 版本需与宿主应用保持一致
    "@angular/core": "^16.0.0",
    "@angular/common": "^16.0.0"
  },
  "dependencies": {
    // 移除@ngrx/store相关依赖，避免打包进组件库
  }
}

2. 配置组件库构建时排除NgRx依赖

在组件库的ng-package.json中添加externals配置，告诉ng-packagr不要将NgRx打包到组件库的dist文件中：

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "dest": "./dist/test-lib",
  "lib": {
    "entryFile": "src/public-api.ts",
    "externals": {
      "@ngrx/store": "@ngrx/store"
    }
  }
}

3. 宿主应用启用符号链接保留

修改宿主应用的angular.json，在build和serve选项中开启preserveSymlinks，确保Angular正确解析外部组件库的依赖路径：

"projects": {
  "your-app-name": {
    "architect": {
      "build": {
        "options": {
          "preserveSymlinks": true,
          // 其他现有配置...
        }
      },
      "serve": {
        "options": {
          "preserveSymlinks": true,
          // 其他现有配置...
        }
      }
    }
  }
}

4. 验证tsconfig路径配置

确保宿主应用的tsconfig.json中，@ngrx/*和组件库的路径配置无冲突：

"paths": {
  "@angular/*": ["./node_modules/@angular/*"],
  "@ngrx/*": ["./node_modules/@ngrx/*"], // 明确指向宿主的NgRx依赖
  "test-lib": ["../test-library/dist/test-lib"]
}

验证步骤 #

1. 重新构建组件库：ng build test-lib
2. 重启宿主应用开发服务器：ng serve
3. 检查组件库是否能正常注入Store并访问宿主应用状态

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