Angular组件包开发优化：寻求替代重复卸载重装的方案

我之前也踩过Angular 5里本地组件库联调的坑，反复卸载重装包确实太折腾人了，结合你用ng-packagr打包的情况，按下面的步骤来应该能彻底解决你的问题：

首先搞定组件库这边的配置和链接：

• 配置自动打包监听：在组件库的package.json里添加一个watch脚本，这样修改代码后会自动重新打包，不用手动执行build命令：

  "scripts": {
    "build": "ng-packagr -p ng-package.json",
    "build:watch": "ng-packagr -p ng-package.json -w"
  }
  

• 把组件库链接到全局npm仓库：在组件库根目录执行命令：

  npm link
  

  这一步会将你的@my-lib/package-one包从本地打包输出目录（默认是dist）链接到全局npm缓存位置。

接下来处理应用端的关键配置（这也是你之前npm link无效的核心原因）：

• 修改Angular CLI支持符号链接：打开应用根目录的angular-cli.json（Angular 5用的是这个配置文件），找到defaults.build节点，添加preserveSymlinks: true：

  "defaults": {
    "build": {
      "preserveSymlinks": true,
      // 保留你原有其他配置
    }
  }
  

  Angular CLI默认会解析模块的真实物理路径，符号链接会被它判定为外部依赖导致加载失败，开启这个配置就能让CLI正确识别本地链接的组件库。
• 将应用关联到本地组件库：在应用根目录执行命令：

  npm link @my-lib/package-one
  

  这一步会把全局链接的本地组件库关联到应用的node_modules目录中。

最后启动联调流程：

• 在组件库项目里执行npm run build:watch，让它持续监听代码变化自动打包；
• 在Angular应用里启动开发服务器ng serve，现在你修改组件库的代码，打包完成后应用会自动刷新（或者手动刷新页面），就能看到最新的组件效果了，再也不用反复卸载重装！

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