Angular库和实时重新加载 [英] Angular library and live reload

问题描述

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

I followed several tutorials on how to build and test an angular libary.

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

工作正常，除了每次执行ng build mylibary时，它都会擦除dist folder中的mylibrary folder.在完成构建之前，服务器(使用npm start启动)会检测到更改(已删除文件夹)并重新编译.当然，由于不再存在库文件夹，因此存在编译错误，除了 ctrl - c 之外，没有其他事情要做，并且再次npm start ...

It's working fine except that each time I'm doing a ng build mylibary, it's erasing the mylibrary folder in the dist folder. And before it has finished to build, the server (launched with npm start) detect the change (folder erased) and re compiles. And of course, since the library folder is not present anymore, there is a compilation error with no other thing to do than ctrl-c and again npm start ...

我错过了什么?

推荐答案

您可以使用 wait- 上等待构建库，请 rimraf 清理dist目录和 npm-run-all 来与一个命令并行运行监视脚本从一个命令行窗口. 因此，安装wait-on，rimraf和run-p作为开发依赖项:

You can use wait-on to await the building of the library, rimraf to clean the dist directory and npm-run-all to run the watch scripts parallel with one command from one command line window. Therefore install wait-on, rimraf and run-p as development dependency:

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

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

And update in package.json the scripts consequently based on the example below:

  "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命令监视库和应用程序.

The library and the application together can be watched using npm run watch:all command.

这是脚本的工作方式:

"clean": "rimraf dist"

删除dist文件夹.

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

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

Waits on the fesm5 folder in the dist directory, ng serve --poll 2000 starts the app and extends the file watch polling time to 2000 ms. In my case the last one was necessary because after a library modification the app was able to reload in the browser with the same content as previously, I could only see the new build after pressing F5.

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

以监视模式构建库.

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

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

Cleans the dist folder, after that it serves the application and watches the library parallel.

这篇关于Angular库和实时重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！