Question

我遵循了一些有关如何构建和测试angular libary的教程。

例如https://www.youtube.com/watch?v=lvjt9rBHWjo

工作正常，只是每次执行ng build mylibary时，它都会擦除mylibrary folder中的dist folder。并且在完成构建之前，服务器（以npm start启动）检测到更改（删除了文件夹）并重新编译。当然，由于不再存在该库文件夹，因此存在编译错误，除了ctrl-c以及npm start ...

我错过了什么？

Answer 1

您可以使用wait-on等待库的建立，使用rimraf清理dist目录，并使用npm-run-all与一个命令并行运行监视脚本命令行窗口。因此，将wait-on，rimraf和run-p安装为开发依赖项：

npm install wait-on --save-dev
npm install rimraf --save-dev
npm install run-p --save-dev

然后根据以下示例在package.json中更新脚本：

  "scripts": {
    ...
    "clean": "rimraf dist",
    "start:app": "wait-on dist/your-library-name/fesm5 && ng serve --poll 2000",
    "watch:lib": "ng build your-library-name --watch",
    "watch:all": "npm run clean && run-p watch:lib start:app",
    ...
  },

可以使用npm run watch:all命令监视库和应用程序。

这是脚本的工作方式：

"clean": "rimraf dist"

删除dist文件夹。

"start:app": "wait-on dist/your-library-name/fesm5 && ng serve --poll 2000"

在fesm5目录中的dist文件夹中，ng serve --poll 2000启动应用程序并将文件监视轮询时间延长到2000毫秒。就我而言，最后一个是必要的，因为在修改了库之后，该应用程序便可以在浏览器中重新加载与以前相同的内容，在按F5键后，我才能看到新的构建。

"watch:lib": "ng build your-library-name --watch"

以监视模式构建库。

"watch:all": "npm run clean && run-p watch:lib start:app"

清理dist文件夹，然后为应用程序提供服务并并行监视库。

Answer 2

这里有一种超级方便的方法，可以让应用自动重新加载，无论是对宿主应用还是库源代码进行更改，同时保持原始结构准备好构建和发布（没有需要在构建和发布库之前恢复对代码所做的任何更改）。

有一个名为 my-lib 的库，需要执行以下步骤：

转到 projects/my-lib/src/lib 目录并创建 index.ts 文件，该文件导出旨在公开提供的 lib 组件
以从先前创建的 projects/my-lib/src/public-api.ts 文件中导出所有内容的方式编辑 index.ts 文件，例如：

export * from './lib/index';
最后，更新tsconfig.json文件（根目录）中lib生成的TS路径指向之前创建的index.ts文件（而不是指向dist文件夹）< /p>

Here 是 git commit，显示了上述步骤中描述的更改。

有关更详细的信息，请访问：Setting up live reload for Angular CLI libraries。

无需外部依赖。

Answer 3

如果您想包含库的构建版本，请使用以下步骤。

在监视模式下构建库

ng build my-lib --watch
在tsconfig.json下的paths中添加构建库的路径

   "paths": {
      "my-lib": [
        "dist/my-lib/bundles/my-lib.umd.js"
      ]
    }

从新的终端窗口启动您的主应用

ng serve --open

与 seidme 推荐的方法相比，这种方法的缺点是组装库所需的构建时间稍长。

为避免打开多个终端，您可以在 scripts 中的 package.json 下添加以下命令。在运行命令之前 npm install wait-on。

"dev": "ng build my-lib --watch & (wait-on ./dist/my-lib/bundles/my-lib.umd.js --delay 2000 && ng serve --open)"

Angular库和实时重新加载

3 个答案: