Angular/CLI——自动重新加载不会发生答案

【问题标题】：Angular/CLI -- auto reload doesn't happenAngular/CLI——自动重新加载不会发生
【发布时间】：2017-11-04 06:00:33
【问题描述】：

我最近开始使用 Angular/CLI 工具，我在执行文件时遇到了一个问题，即当我运行时

ng serve

然后这个命令帮助我们在源文件中进行任何更改时自动重新加载站点，但在我的系统中它没有发生（即站点没有自动重新加载，当我强制重新加载站点时它也没有得到根据源文件中所做的更改进行更新）。

只有当我终止“ng serve”命令并再次运行相同的命令（“ng serve”）时，网站才会更新，然后只有我的网站会更新。

因此，一旦发生更改，我就很难终止服务器并连接服务器，所以如果有人知道此问题的解决方案，请帮助我。

【问题讨论】：

标签： angular-cli

【解决方案1】：

几天前我在我的 linuxOS 中也遇到了同样的问题，当我读到它时，我发现这个问题在很大程度上取决于你使用的系统和你为 angular-cli 进行设置的方式，两者全球和本地。因此，在阅读了 angular-cli 为每个项目创建的 readme.md 之后，我尝试使用 ng-build --watch 但问题仍然无法解决，因为通过运行此命令，它应该像 ng-serve 一样工作，但它只构建应用程序和甚至没有在localhost:4200 上提供它。然后，在更深入地研究问题后，我发现了问题，它与我的操作系统有关，我使用的是 ubuntu，inotify/max_user_watches 值 8192，我越过了它，因此它没有显示任何进一步的更改。所以我用了这些- echo "fs.inotify.max_user_watches=524288" | sudo tee -a /etc/sysctl.conf sudo sysctl -p 而且效果很好。

附言在此过程中，我还偶然发现了使用这些命令的解决方案- rm -rf nodes_modules/ -> npm update -> npm install。在执行上述方法之前先尝试一下，如果这对您有用，那么您一切顺利。

【讨论】：

谢谢，简单的“rm -rf nodes_modules/ -> npm update -> npm install”解决方案对我有用。
代替这个，我删除了全局生成的node_modules（运行npm list -g），然后通过npm -i -g npm > npm update > npm install 重新安装了npm。我得到了来自this 答案的指点。

【解决方案2】：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

【讨论】：

【解决方案3】：

当文件被修改时，Ng serve 会自动重新加载，但是如果配置搞砸了，那么你可以尝试下面的命令

ng serve --live-reload

【讨论】：

【解决方案4】：

用 sudo 运行 ng serve，它对我有用

sudo ng serve

这仅适用于 Linux！

【讨论】：

为什么会这样？
为什么需要将其作为 sudo 运行？它不应该像普通用户一样为您服务吗
即使知道这不应该是解决问题的最佳方法，但实际上它为我节省了很多时间，谢谢@ThomasJohn
这是一个非常糟糕的答案。永远不要以 root 身份运行可以在用户权限下运行的应用程序！！这还将为在该进程下创建的所有文件设置 root 权限，这意味着情况只会变得更糟。

【解决方案5】：

我正在使用 angular 6 并且增加 max_user_watches 的时间对我有用

sudo echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf

sudo sysctl -p /etc/sysctl.conf

【讨论】：

对我有用，但首先使用“sudo su”。

【解决方案6】：

只需运行以下所有命令，我希望它会起作用。

rm -rf nodes_modules/
npm update
npm install

然后重新启动服务器

ng serve -o

【讨论】：

【解决方案7】：

它对我有用： ng 服务 --poll=1000

【讨论】：

这是唯一对我有用的方法（我在基于 node:fermium 映像的 docker 容器内运行 Angular Dev Server）

【解决方案8】：

我在我的 ubuntu 机器上遇到了同样的问题。这是由于权限设置。我按照下面提到的步骤更改了工作区权限设置。

打开一个终端窗口。
在终端中输入sudo chmod a+rwx /path/to/file，将“/path/to/file”替换为您要提供的文件授予所有人的权限，然后按“Enter”。您还可以使用命令sudo chmod -R a+rwx /path/to/folder 授予权限一个文件夹以及其中的每个文件和文件夹。省略“x” 如果您不希望文件可执行，请使用任一命令。

我用过sudo chmod -R a+rwx /path/to/folder。

在密码提示符处输入您的密码，然后按“Enter”。

完成后，执行npm build 并通过ng serve 启动应用程序。

[OR]

您只需使用“sudo ng serve”即可。

现在对工作区文件进行必要的更改，无需重新启动，就会自动重新加载。希望这会有所帮助！

【讨论】：

【解决方案9】：

如果角度自动重新加载在 ubuntu 20.04 上不起作用并且您正在使用 nvm，请尝试运行以下命令：

sudo echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf
删除应用文件夹中的node_modules
npm 卸载 -g @angular/cli
npm 缓存验证
npm install -g @angular/cli
在应用程序的文件夹中运行 npm i

希望当您运行 ng serve 时，现在一切都应该按预期工作了。

【讨论】：

【解决方案10】：

我遇到此问题是因为我使用 WSL 为位于 Windows 目录 (/mnt/...) 下的项目运行命令。

为了解决这个问题，我将项目目录转移到 WSL 目录 (~/) 上。

【讨论】：

【解决方案11】：

当我的 devDependencies 是 Angular 7 时遇到了问题
但安装angular/cli 版本8.x.x

"devDependencies": {
    "@angular-devkit/build-angular": "^0.13.8",
    "@angular/cli": "^7.3.8",
    "@angular/compiler-cli": "^7.2.12",
}

只需全局删除 cli

npm unintsall -g @angular/cli
npm cache clean -f

检查状态

ng version # if remove successfully, the command would no work

然后重新安装 cli

sudo npm install @angular/cli@^7.3.8 -g

【讨论】：

【解决方案12】：

对我有用的是简单地将 tsconfig.js 中的“compileOnSave”选项设置为“true”

【讨论】：

【解决方案13】：

如果您使用的是 Linux 系统，那么下面的命令可能会对您有所帮助

在终端中运行以下命令

sudo ng 服务

对我有用！！

【讨论】：

这是一个非常糟糕的答案。永远不要以 root 身份运行可以在用户权限下运行的应用程序！！这还将为在该进程下创建的所有文件设置 root 权限，这意味着情况只会变得更糟。