运行两个 Angular CLI 任务一个接一个，使用 --watch

Question

我有两个任务，需要运行一个接一个：

ng build <library-name> && ng serve

我想在 <libary-name> 上观看文件更改，所以我添加：

ng build <library-name> --watch && ng serve

这显然是行不通的，因为 watch 永远不会结束，所以 ng serve 永远不会被调用。

ng build <library-name> --watch & ng serve

这个解决方案也不好，因为 ng serve 在 ng build 完成之前就开始了。

有什么方法可以从第一个 ng build 中捕获 Compilation complete 消息，然后 then let file watcher 运行？有没有什么办法可以像这样启动观察者：

ng build <library-name> && --watch-the-libary-please & ng serve

?

Answer 1

好的，我可能已经找到适合您的解决方案。我编写了简单的 Python 脚本，它将通过计算其 sha1sum 来检查目录（在本例中为您的库）是否已更改。如果它实际上发生了变化，那么它将运行你对 ng build 和 ng serve

的命令

import time
import os
from checksumdir import dirhash

directory = '/YOUR/PATH/TO/LIBRARY'
initial_sha1 = dirhash(directory, 'sha1')

modified = False

while modified is False:
    current_sha1 = dirhash(directory, 'sha1')
    if initial_sha1 != current_sha1:
        print("Files has been hanged")
        os.system('ng build <libary-name>')
        os.system('ng serve')
        modified = True
    else:
        time.sleep(10)

如果你想运行这无限期地而不是将标志 modified 更改为 True 将首字母 sha 的值更改为当前值 initial_sha1 = current_sha1 并在需要时终止程序。

您可能需要安装此软件包：

pip install checksumdir

这在 Python 2.7 和 3.X 下有效（为此您可能需要使用 pip3 安装 checksumdir）

编辑

您可能需要在构建应用程序的目录下执行此脚本，或者在 ng buld

之前添加

os.system('cd /PATH/WHERE/YOU/BUILD')

Answer 2

您可以使用 npm 包 concurrently，它允许运行并行执行多个命令。

Answer 3

我遇到了同样的问题，我可以想出一个解决方案。所以，就留在这里吧。

具有以下脚本，npm start 将同时启动 ng build my-lib 和 ng build serve，无论您在 my-app 还是 my-lib 中进行更改, 它将触发构建。

要执行的步骤是：

删除我的库输出路径中的目录dist-lib
开始使用 --watch 选项构建我的库
运行 wait-for-lib.js 等待创建 my-lib 输出目录
为 my-app

package.json

{
  "scripts": {
    "start": "npm-run-all clean:lib --parallel start:**",
    "start:app": "node ./scripts/wait-for-lib.js && ng serve",
    "start:lib": "ng build my-lib --watch",
    "clean:lib": "shx rm -rf ./dist-lib"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    "shx": "^0.3.3"
  }
}

angular.json

{
  "projects": {
    "my-app": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            "outputPath": "dist"
          },
          ...
        }
      }
    },
    "my-lib": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            "outputPath": "dist-lib"
          },
          ...
        }
      }
    },
  },
  "defaultProject": "my-app"
}

./scripts/wait-for-lib.js

const fs = require('fs');

const pathToMyLib = './dist-lib/my-lib';

function waitFor(path) {
    console.log(`Waiting for ${path} is created...`);
    if (!fs.existsSync(path))
        setTimeout(() => waitFor(path), 1000);
}

waitFor(pathToMyLib);

运行两个 Angular CLI 任务一个接一个，使用 --watch

Run two Angular CLI tasks after each other, with --watch

angular-cli

angular

angular-cli-v6

编辑

运行 两个 Angular CLI 任务一个接一个，使用 --watch

Run two Angular CLI tasks after each other, with --watch

angular-cli

angular

angular-cli-v6

编辑

运行两个 Angular CLI 任务一个接一个，使用 --watch