时间戳

首页 > 解决方案 > Angular 库和实时重载

angular - Angular 库和实时重载

问题描述

我遵循了几个关于如何构建和测试angular libary.

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

它工作正常，除了每次我做 a时，ng build mylibary它都会擦除mylibrary folder. dist folder在完成构建之前，服务器（使用 npm start 启动）检测到更改（文件夹已删除）并重新编译。当然，由于库文件夹不再存在，因此除了编译错误之外别无他法ctrl-c再次 npm start ...

我错过了什么？

标签： angular

解决方案

您可以使用wait-on来等待库的构建，使用rimraf来清理dist目录，并使用 npm-run-all从一个命令行窗口与一个命令并行运行监视脚本。因此 install 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文件夹，然后它为应用程序提供服务并并行监视库。

推荐阅读