Angular cli - 如何在ng serve时禁止自动重新加载 有大用

angular应用程序是用ng serve启动的，因此启动了服务器，如果angular应用程序中的组件/css/html有任何变化，ng serve会自动重新加载变化。

下面的命令启动服务器并重新加载代码的变化。

ng serve (or)
ng serve --live-reload (or)
ng serve --live-reload=true
复制代码

每当你在Vscode或IDE中对typecript组件/css/images进行修改时，angular reload服务器会自动重建和重新编译并启动服务器。

live-reload 在浏览器中实现实时重载更改

如何防止Angular应用程序中的自动重新加载变化？

我们有多种方法可以配置重载选项

使用命令行，你可以使用--live-reload=false

ng serve --live-reload=false (or) 
ng serve --live-reload false  
复制代码

这可以防止开发服务器的变化。

-live-reload=true/false选项可以使重载变化或不重载。

另一个选项是通过脚本package.json禁用livereload。

package.json

{
  "name": "angular-disable-chanegs",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --live-reload=false",

  },
}
复制代码

下面的命令可以在生产中禁止重载更改。

ng serve --source-map=false --aot --prod --live-reload=false
复制代码

通过脚本添加同样的东西

{
  "name": "angular-disable-chanegs",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --source-map=false --aot --prod --live-reload=false"

  },
}
复制代码

第二个选项，使用--no-live-reload 与 ng 命令

ng serve --no-live-reload
复制代码

如果上面的选项不起作用，第三种选项

ng serve --watch=true|false
复制代码

这是用serve命令禁用rebuild on change选项。

防止使用 ng build 重新加载变化

live-reload 选项在 ng build 命令中不起作用，并抛出 "未知选项：-live-reload"。

B:\angular-example>ng build --live-reload=false
Unknown option: '--live-reload'
复制代码

你可以使用 ng build 的 -watch true/false 选项。

ng build --watch=true/false
复制代码

在package.json中使用脚本

{
  "name": "angular-disable-chanegs",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --live-reload=false",
    "build": "ng build --watch=false"

  },
}
复制代码

如何禁用Angular中assets文件夹的实时重载？

使用-live-reload=false选项，它可以在应用层面上禁止重载变化。

要排除特定的目录/文件夹，你必须在tsconfig.json中添加

例如，为了防止自动加载assets文件夹，你可以在文件夹路径或文件路径中添加exclude属性，如下所示

问题

当你遇到以下问题时

• 实时重载在windows下不工作

• ng service在linux/reload中不能自动检测到变化。

• ng serve-live reload不能按预期工作

对于所有的解决方法，修复是共同的。

以下是解决ng service的步骤

• 在linux或unix的操作系统中增加max_user_watches的时间值。

sudo echo "fs.inotify.max_user_watches=635199" >> /etc/sysctl.conf
复制代码

• ng serve使用操作系统的文件系统来访问文件，请确保命令有足够的权限来读写文件。

sudo chmod -R a+rwx /angular-application
复制代码

• 使用以下命令从你的应用程序中删除node_modules文件夹

• 删除package-lock.json文件

• 使用下面的命令卸载@angular/cli

npm uninstall -g @angular/cli
复制代码

• 使用下面的命令验证和清理缓存

npm cache verify (or)
npm cache clean -f 
复制代码

npm install -g @angular/cli
复制代码

• 使用下面的命令安装所有的依赖项

最后，运行ng serve -live-reload命令，使其自动启用/禁用reload changea。

作者：迪鲁宾
链接：https://juejin.cn/post/7125637544112291877
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

来自 https://juejin.cn/post/7125637544112291877