如何正确安装Fork的ngx-extended-pdf-viewer代码仓库？

算力阿峰

2026-10-4

问题描述

我Fork了ngx-extended-pdf-viewer仓库，尝试安装时遇到问题，原仓库package.json中的npm脚本配置如下：

"scripts": {
    "ng": "ng",
    "start": "ng serve --deployUrl=/path/ --host 10.0.1.3 --disable-host-check",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "unix-package": "ng b ngx-extended-pdf-viewer && rm -r dist && ng-packagr -p projects/ngx-extended-pdf-viewer/ng-package.json",
    "showcase": "npm run unix-package && rm -r ../extended-pdf-viewer-showcase/node_modules/ngx-extended-pdf-viewer && cp -R dist/ngx-extended-pdf-viewer ../extended-pdf-viewer-showcase/node_modules/ngx-extended-pdf-viewer",
    "issue": "npm run unix-package && rm -r ../ngx-extended-pdf-viewer-issues/issue317-ng9/node_modules/ngx-extended-pdf-viewer && cp -R dist/ngx-extended-pdf-viewer ../ngx-extended-pdf-viewer-issues/issue317-ng9/node_modules/ngx-extended-pdf-viewer",
    "win-package": "ng b ngx-extended-pdf-viewer && rmdir dist /S && ng-packagr -p projects/ngx-extended-pdf-viewer/ng-package.json",
    "release": "npm run unix-package && cd dist/ngx-extended-pdf-viewer && npm publish && cd .. && cd .. && ./createTag.sh && node ./increase-version-number.js",
    "cypress": "./node_modules/.bin/cypress open"
  }

安装过程报错截图如下：
错误截图

已尝试的解决操作

新增prepare脚本，用于打包projects/ngx-extended-pdf-viewer子目录下的代码，修改后的脚本片段如下：

"unix-package": "ng b ngx-extended-pdf-viewer && rm -r dist && ng-packagr -p projects/ngx-extended-pdf-viewer/ng-package.json",
"prepare": "npm run unix-package"

因/dist目录被加入.gitignore，已新增空.npmignore文件，问题仍未解决。

解决方案

按照以下步骤依次排查即可修复问题：

适配跨平台删除命令
如果是Windows系统运行，unix-package中的rm -r命令无法执行，可安装跨平台删除工具rimraf替换原生删除命令，修改脚本如下：

# 先安装rimraf开发依赖
npm i -D rimraf

修改对应脚本：

"unix-package": "ng b ngx-extended-pdf-viewer && rimraf dist && ng-packagr -p projects/ngx-extended-pdf-viewer/ng-package.json",
"prepare": "npm run unix-package"

检查package.json入口配置
确认package.json中的main、module、typings字段指向的路径和dist目录的实际输出路径一致，参考配置如下：

"main": "./dist/ngx-extended-pdf-viewer/bundles/ngx-extended-pdf-viewer.umd.js",
"module": "./dist/ngx-extended-pdf-viewer/fesm2015/ngx-extended-pdf-viewer.js",
"typings": "./dist/ngx-extended-pdf-viewer/ngx-extended-pdf-viewer.d.ts"

验证打包输出正常
手动执行npm run unix-package命令，检查dist目录是否成功生成，目录结构是否完整，确认打包过程没有报错。
匹配Angular版本
确认本地安装的Angular CLI版本和原仓库依赖的Angular版本一致，版本差异过大可能导致ng build命令执行失败，无法生成dist目录。
本地验证调试
如果是通过远程仓库地址安装依赖，可先使用npm link命令在本地进行关联测试，确认修复有效后再推送代码到远程仓库。

内容的提问来源于stack exchange，提问作者The.Wolfgang.Grimmer