Angular开发模式下如何让宿主项目感知库的变更？

兄弟，我之前也碰到过这个烦人的问题！每次改完Angular库都要重复构建、发布、重新安装，简直是在浪费开发时间。给你几个亲测有效的方案，帮你搞定开发阶段的自动同步：

方案一：用Yalc替代npm link（最推荐，踩坑最少） #

Yalc就是专门解决本地包开发依赖同步的工具，比npm link靠谱太多，不会出现模块解析的奇怪问题：

• 先全局装Yalc：npm install -g yalc
• 在你的my-lib库目录，先执行构建（npm run build），然后发布到本地Yalc仓库：yalc publish
  👉 可以直接在package.json里加个脚本省事儿："yalc:publish": "npm run build && yalc publish"
• 切换到宿主Angular应用目录，执行yalc add my-lib，这时候宿主项目的package.json会多一条Yalc的依赖记录，同时本地node_modules里的my-lib会链接到你的库构建产物
• 之后每次改完库代码，只要执行yalc push，这个命令会自动把更新同步到所有引用了该库的本地项目，宿主项目的ng serve会自动检测到变化并刷新应用

方案二：本地路径引用 + 库的watch模式 #

如果不想用额外工具，直接让库自动构建，宿主项目直接引用本地文件就行：

• 在my-lib目录，启动watch模式自动构建：ng build my-lib --watch（Yeoman生成的项目可能有现成的脚本，比如npm run build:watch，可以看package.json里的scripts）
• 打开宿主项目的package.json，把my-lib的依赖改成本地路径：

  "dependencies": {
    "my-lib": "file:../my-lib/dist/my-lib"
  }
  

• 执行npm install，之后只要库的watch模式在运行，每次修改代码都会自动重新构建，宿主项目的开发服务器会自动感知到依赖变化并重新加载

方案三：修复npm link的问题（如果坚持要用） #

你之前用npm link无效，大概率是Angular的模块解析机制搞的鬼，试试这些步骤：

• 进入my-lib的dist目录，执行npm link
• 切换到宿主项目目录，执行npm link my-lib
• 关键操作：在宿主项目的angular.json里，给build配置加上preserveSymlinks: true：

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

• 重启宿主项目的ng serve，这样Angular就能正确解析链接的库模块了

另外提个小细节：不管用哪个方案，都要确保my-lib的package.json里的main、module、typings字段指向dist目录下的正确文件，Yeoman生成的项目一般已经配置好了，但可以检查一下避免踩坑。

内容的提问来源于stack exchange，提问作者m.bouali