如何在关联库重新编译时延迟Angular项目的重载？

针对Angular库编译时主项目因提前访问未完成编译的库而崩溃的问题，这里有几个实用的解决思路：

方案1：用wait-on + nodemon + 并发脚本控制 #

这个方案通过监听库的输出目录，延迟触发主应用的重启，确保库编译完全后再重载。

1. 安装依赖包：

npm install --save-dev wait-on nodemon concurrently

2. 在package.json中配置脚本：

{
  "scripts": {
    "build:lib:watch": "ng build mylib --watch",
    "start:app": "wait-on dist/mylib && ng serve",
    "dev": "concurrently \"npm run build:lib:watch\" \"nodemon --watch dist/mylib --delay 2000ms --exec 'npm run start:app'\""
  }
}

• wait-on确保主应用启动前，库的dist目录已存在且编译完成
• nodemon监听dist/mylib的文件变化，延迟2秒后重启主应用（可根据实际编译时间调整延迟值）
• concurrently同时运行库的watch构建和主应用的监听重启流程

3. 启动开发流程：

npm run dev

方案2：自定义Webpack插件实现延迟重载 #

通过修改Angular的Webpack配置，添加自定义插件监听库的编译完成事件，延迟触发主应用的重载。

1. 安装自定义Webpack构建工具：

npm install --save-dev @angular-builders/custom-webpack

2. 修改angular.json，将主应用的devServer和build的builder替换为自定义Webpack版本：

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server"
        }
      }
    }
  }
}

3. 创建自定义Webpack插件文件webpack-delay-reload-plugin.js：

const fs = require('fs');
const path = require('path');

class LibraryDelayReloadPlugin {
  constructor(options = {}) {
    this.libDistPath = path.resolve(__dirname, options.libDistPath || 'dist/mylib');
    this.delay = options.delay || 2000;
    this.reloadTimeout = null;
  }

  apply(compiler) {
    // 监听watch模式下的文件变化
    compiler.hooks.watchRun.tap('LibraryDelayReloadPlugin', () => {
      // 确保库目录存在，避免无效触发
      if (fs.existsSync(this.libDistPath)) {
        // 清除之前的超时任务，避免重复触发
        if (this.reloadTimeout) clearTimeout(this.reloadTimeout);
        // 延迟指定时间后触发重载
        this.reloadTimeout = setTimeout(() => {
          compiler.watching.invalidate();
        }, this.delay);
      }
    });
  }
}

module.exports = LibraryDelayReloadPlugin;

4. 在custom-webpack.config.js中引入插件：

const LibraryDelayReloadPlugin = require('./webpack-delay-reload-plugin');

module.exports = {
  plugins: [
    new LibraryDelayReloadPlugin({
      libDistPath: 'dist/mylib', // 你的库输出路径
      delay: 2000 // 延迟时间，单位ms
    })
  ]
};

5. 正常启动库的watch构建和主应用：

# 终端1
ng build mylib --watch

# 终端2
ng serve

方案3：用Chokidar手动监听控制 #

通过Node.js脚本手动监听库的输出目录，控制主应用的启动和延迟重启。

1. 安装Chokidar：

npm install --save-dev chokidar

2. 创建dev-runner.js脚本：

const chokidar = require('chokidar');
const { spawn } = require('child_process');
const path = require('path');

let appProcess = null;
const LIB_DIST_PATH = path.resolve(__dirname, 'dist/mylib');
const RELOAD_DELAY = 2000; // 延迟时间，单位ms

// 启动或重启主应用
function restartApp() {
  if (appProcess) {
    appProcess.kill('SIGTERM');
  }
  console.log('🔄 重启主应用...');
  appProcess = spawn('npm', ['start'], { stdio: 'inherit' });
}

// 监听库输出目录的变化
chokidar.watch(LIB_DIST_PATH, {
  ignoreInitial: false, // 初始扫描时也触发一次启动
  awaitWriteFinish: {
    stabilityThreshold: 500, // 等待文件写入稳定后再触发
    pollInterval: 100
  }
}).on('all', () => {
  setTimeout(restartApp, RELOAD_DELAY);
});

// 启动库的watch构建
console.log('🚀 启动库的watch构建...');
spawn('npm', ['run', 'build:lib:watch'], { stdio: 'inherit' });

3. 在package.json中添加脚本：

{
  "scripts": {
    "build:lib:watch": "ng build mylib --watch",
    "dev": "node dev-runner.js"
  }
}

4. 启动开发流程：

npm run dev

内容的提问来源于stack exchange，提问作者A. Morel