Angular 角度库和实时重新加载

我学习了一些关于如何构建和测试

角度库的教程

例如

它工作正常，只是每次我做
ng build mylibrary
，它都会删除
dist文件夹中的
mylibrary文件夹
。在完成构建之前，服务器（使用npm start启动）会检测到更改（删除文件夹）并重新编译。当然，由于库文件夹不再存在，因此出现编译错误，除了ctrl-c和npm start之外，别无选择

我错过了什么？
您可以使用它等待库的构建，清理
dist
目录，并在一个命令行窗口中通过一个命令并行运行监视脚本。
因此，安装
等待
、
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"

等待
dist
目录中的
fesm5
文件夹，
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
文件夹，然后它为应用程序提供服务并并行观察库。
这里有一个超级便捷的方法，可以让应用程序自动重新加载无论是对宿主应用程序还是库源代码进行更改，同时保持原始结构随时可以构建和发布（无需恢复在构建和发布库之前对代码所做的任何更改）

有一个名为
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
文件（根文件）中库的生成TS路径，以指向先前创建的
index.TS
文件（而不是指向dist文件夹）



是git提交，显示上述步骤中描述的更改

有关更详细的信息，请访问：

不需要外部依赖项。
如果希望包含库的生成版本，请使用以下步骤

在监视模式下构建库

ng构建我的库——观看


在
paths
下的
tsconfig.json
中添加内置库的路径


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

ng发球——打开


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

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

“dev”：“ng build my lib--watch&（wait on./dist/my lib/bundles/my-lib.umd.js--delay 2000&&ng service--open）”
为什么不在使用ng build Commands构建时停止npm服务器？为什么我要这样做？在视频中，它是这样工作的。我只是想做同样的事情…也许这样：可以帮助你我使用Angular 10，它的解决方案非常好！我只是改变了两件事：不是安装
npm安装run-p，而是保存我安装的dev
npm-install-npm-run-all--save dev
而不是等待
dist/lib/fesm5
我等待了
dist/lib/fesm2015
。谢谢！谢谢你分享
npm-run-all
的想法！是的，在Angular 10的情况下，等待
dist/lib/fesm2015
是完美的。@Milantenek我需要手动重新加载URL一次我的访问改变任何东西。我们不能用这个自动重新加载URL吗？@K.Raj：我还没有解决这个问题，所以我不能帮你解决这个问题。：\n这太棒了，应该是正确的答案！我已经将这个简单的更新应用到我的Angular 11工作区，并且工作完美。库更新触发并实时快速顺利地重新加载我的应用程序（实时重新加载）.很高兴，这改善了开发时间，就像我希望的那样。谢谢。我反复考虑过这个想法，但我不确定根据Angular团队的评论，它是否一定安全。具体来说，请看：真正的大问题是，你没有正确地构建库。当你最终尝试构建和使用库时，任何数量的问题都可能出现，而您在开发时没有看到。@MarkBrodziak我用这种方式构建了5-6个库，并且没有注意到任何问题（想知道它们可能是什么）。答案中描述的方式是，开发服务器正在监视原始文件的更改。一旦准备发布，您将使用标准的生产构建过程，该过程将库编译到dist文件夹（从那里发布到npm）。整个过程类似于标准应用程序开发，在开发过程中观察原始文件，并在准备就绪后为生产构建。我最终确定了这种方法，它对我们的用例非常有效，因此可能过于谨慎。在我们的情况下，我们在年之前不会将库作为NPM模块发布
   "paths": {
      "my-lib": [
        "dist/my-lib/bundles/my-lib.umd.js"
      ]
    }