ngサーバーがファイルの変更を自動的に検出しない


110

ng serveソースファイルに変更を加えるたびに実行する必要があります。コンソールにエラーはありません。

Angular CLI: 1.6.2
Node: 8.9.1
OS: linux ia32
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.2-c3d7cd9
@angular/cli: 1.6.2
@angular/material: 5.0.3-e20d8f0
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

2
ng serve --watchを試しましたか?
planet_hunter 2018年

2
はい。しかし、それは私の問題を解決しませんでした
バスカララオグミディ2018年

更新された回答を確認して、問題が解決したかどうかをお知らせください。
planet_hunter

この方法を試してみてください- stackoverflow.com/a/42534127/1191125
zeleniy

回答:


151

Linuxではほとんどの場合、ng serveまたはng build --watchディレクトリに十分な権限がない場合は機能しません。

解決策は、必要な権限を提供するか、sudo代わりに使用する ことです。

更新

監視フラグng serveはデフォルトのオプションであるため、実際には冗長です。間違いを指摘した@Zaphoidの功績です。


29
ありがとうございました。権限で実行ng servesudoます。それは働いた。
バスカララオグミディ

1
次に、これを回答として受け入れてください。これは、将来この質問を読む人を助けるでしょう
モーグはモニカを復活させます

3
@Mawg sudoを使用する代わりに。ファイルに必要な権限のセット
oracleruiz

2
実行しているユーザーに依存しますが、おそらく同じですa+xが、ではなく、アクセス許可を使用しないように警告しsudoます。sudo単一のコマンド用ですが、権限を変更すると永久に変更されるため、セキュリティリークが大きくなります。
モーグはモニカを

5
--watchこれはデフォルトなので必要ありません。angular.io/ cli / serveを参照してください。@Tです。van den Bergの答えは実際にはより正確でした!
Zaphoid '20年

126
ng serve --poll=2000

LinuxとWindowsで正常に動作する


19
それはどういう意味ですか(--poll)
HD ..

1
この作品は確認できます。WIndows 10(Ubuntu)でLinuxサブシステムを実行し、VS CodeをWindowsで実行します。
Ales Potocnik Hahonina 2018

Ubuntuの18.0.4で動作します
ニシャンWickramarathna

2
それはubuntu 18.04で動作しました。その理由を教えてください。
Vijender Kumar

1
私にとってはうまくいきます!しかし、原因がわからない "ng serve"プロジェクトをリロードしないでください。
ホセ・ルイス・ゴンザーガネト

81

多数のファイルがある場合、LinuxのINotify監視には制限があることを考慮してください。たとえば、監視の制限を512Kに増やすと、これを解決できます。

sudo sysctl fs.inotify.max_user_watches=524288
sudo sysctl -p --system

前の操作はメモリ内の変更を引き起こし、再起動後に失われることに注意してください。

ただし、次のコマンドを実行すると、永続化できます。

echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

参照として、https//github.com/angular/angular-cli/issues/8313#issuecomment-362728855および https://github.com/guard/listen/wiki/Increasing-the-amount-を確認できます。 of-inotify-watchers


5
これは私にとってubuntu 14で機能しました-"echo fs.inotify.max_user_watches = 524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system"
mahesh kajale

1
このコマンドを使用して、現在のウォッチの制限を確認/テストできますcat /proc/sys/fs/inotify/max_user_watches 上記の回答は完全に完全な回答ですが、ここに少し詳しい説明があるリンクがありますconfluence.jetbrains.com/display/IDEADEV/Inotify+Watches+Limit
Junaid

うまくいきました。一部のIDE(JetBrains Webstormなど)は、inotifyを使用してファイルの変更も追跡することに注意してください。したがって、5つのプロジェクトを開いてng serveを実行する場合は注意してください。
マルチの

25

そのため、変更を検出するシステムは、デフォルトではあまり多くのウォッチを処理できません。

そして、解決策はchange the amount of watchesそれが処理できることです(プロジェクトに含まれるファイルの最大量)run this command

echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches

inotifyの問題は、コンピュータを再起動するたびにこのカウンタをリセットすることです。


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

18

プロジェクトのdistフォルダーはrootが所有しています

sudo ng serve代わりに使用してみてくださいng serve

別の解決策

多数のファイルがある場合、ウォッチはLinuxで機能しません。LinuxのINotifyウォッチには制限があります。だから時計の制限を増やす

//When live server not work in linux

sudo sysctl fs.inotify.max_user_watches=524288
sudo sysctl -p --system

ng serve //You can also do sudo **ng serve**

8

問題を解決するには、sudo ng serve を実行するだけです。


5
良い回避策ですが、なぜそうする必要があるのか​​が本当の問題です...ルートとして実行することはベストプラクティスではありません...
Pipo

5

これは、私と同じ問題である場合に役立ちます。使ってみてng serveng build --watch時にはうまくいったが、ほとんどがコードの変更を監視しておらず、私はそれが何かに関係していると思ったng

その後、inotifyの時計でしばらく前に問題があったことを思い出しました

私は自分のUbuntuマシンでこれを実行しましたが、コードの変更を開始して監視しているようです。

echo fs.inotify.max_user_watches = 524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

クレジットはスコット・スミスに行く


3

これを試して。あなたがこれを好きなら、あなたはいつもどんなコマンドも発射する必要はありませんあなたは一度だけ発射する必要があります

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

cat /proc/sys/fs/inotify/max_user_watches

fs.inotify.max_user_watches=524288

3

私にはうまくいきませんでした:

ng serve --watch

試してください:

sudo ng serve

これは私のために働いた!


2

他のすべてが失敗した場合は、コードに構文エラーがないか確認してください-特にindex.html、またはこの自動更新が壊れる直前に最近編集したコードの一部について。構文エラーは、Angularのこの自動更新機能を破壊します。

私の場合、複数のプロジェクトを別々のVSコードウィンドウで開いていました。他のすべてのプロジェクトでng serveは、期待どおりに機能しました。保存時に自動更新されました。ただし、1つのプロジェクトでは、更新するために手動で更新する必要があります。テンプレートの定義済みHTML領域外にhtmlコメントがあったためです(<!doctype html>つまり、HTMLコメントは前に来ました。そのため、HTML領域外のHTML構文は無効でした。

コメントとBAMを削除したところ、自動更新が再び機能し始めました(手動で更新した後)。

だから、通過index.htmlしたり、コードの他の部分は、あなたが最近、この一文無しとひとつずつ前に編集不完全部分を切り取って、ブラウザでリフレッシュを行い、その後、VSのコードに戻ってくると保存、変更を行うと更新自動それかどうかを確認。


1
テンプレートに関するその他のエラーも、テンプレートが正常に機能しない可能性があります。私の場合、を期待するカスタムコンポーネント@Input()がありましたが、次のように属性が空白[myInput]=""でした。復元された値を入力しますng serve。手動で更新する必要はありません。
ザレフェス

2

プロジェクトのdist /フォルダーがrootによって所有されていることを発見しました。そうしないとsudo ng serve、変更が表示されますng serve

私はdist /フォルダーを削除し、開発sudo rm -R dist/サーバーng serveを起動して現在のユーザーとして再構築し、すべてが再び機能しました。


2

新しいLinux Ubuntuのインストールでこの問題が発生し、同時にVSCodeで「制限に対してウォッチャーが多すぎます」というエラーが発生していることに気付きました。私はVSCodeでそれを修正するために指示に従いました、それはまた、ng時計の問題を修正しました。詳細はこちらhttps://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc

私は人々sudoが時計を走らせることを提案していることに気づきました。これは危険なゲームです。npmパッケージにシステムへのルートアクセスを与えています。権限が正しい場合、制限はユーザーごとであるため、私の問題はあなたの修正である可能性があり、sudoとして実行することで、制限を超えている現在のユーザーの代わりにrootとして実行されます(vscodeやatomのような時計の重いIDEを実行します)オン )。何らかの理由で間違った権限を持っている場合は、でユーザー/グループに適切に設定してくださいchown


使用することを示唆しているため+1 chown実行する代わりng servesudo、すべての手段によって回避されるべきです、!
トビ

1

私も同じ問題を抱えており、使用すると問題sudo ng serveが「解決」したようです。sudoIMO を使用するだけでは不十分です。

INotifyの数とデフォルトの制限(8192)を lsof | grep inotify | wc -l 比較しました。上記のコマンドで返された値は、制限をはるかに下回っていました。したがって、INotifyソリューションは私の問題に適用されないようです。

また、権限と所有権も確認しました。どちらも問題ないようで、機能する別のプロジェクトと同等です。

欲求不満からVS Codeを再起動しました。基本的に私はすべてのインスタンスを閉じました、私は2つを実行していて、両方を再び開いた後、問題はなくなりました。

どこかにバグがある可能性があります。これは、システムを裏返す前に考慮すべきことです。幸いにも、残念ながら、この問題は再び発生していません。発生した場合は、さらに掘り下げます。



1

SOパラメータを変更することはお勧めしません。他のサービスを実行しているため、fs.inotify.max_user_watchesパラメータを変更した後、いくつかの(ラグ)問題が発生しました...

"ng serve --poll = 2000"は良い解決策ですが、おそらくこのパラメータを忘れるでしょう...

調査:https : //github.com/angular/angular-cli/wiki/angular-cli 私は次のソリューションを実行しました。

pollパラメータでde angular.jsonを変更

"serve": {
   "builder....
   "options": {
        "browserTarget": "xkcd:build",
        "poll": 2000
   }
   ...

私のマシンで動作します:D


ありがとうございました!これは、設定ファイルを変更せずに実行する臨時の方法ですnpm run ng serve -- --poll=2000。これはファイル変更の検出ほどよくありませんが、私のマシンで動作します(Ubuntu 18.04の企業フレーバー)。max_user_watchesを524288に設定してng serveいますが、しばらくしても変更の検出に失敗します。私はこれを調査するよりもやるべきことがあるので、この解決策は私が必要としているものです。
Andrei Sinitson

1

こうsudo ng serveコマンドは悪い習慣です。npm権限を変更する必要があるため、一部をインストールする必要がある場合は毎回npm packages使用する必要はありませんsudo

このリンクは、npm権限を現在のユーザーに変更する方法を解決できます。npm権限を設定した後、この手順を実行した後node_modules、プロジェクトディレクトリからフォルダーを削除してを使用できますnpm install。パッケージのインストールの完了後、実行できます。角度プロジェクトを実行するたびに実行ng serveする必要はありませんsudo ng serve



0

私の答えは役に立たないかもしれません。しかし、私はこのためにこの質問を検索します。

新しいコンピューターを購入した後、エディターで自動保存を設定するのを忘れました。したがって、コードは実際には変更されません。


0

参考までにここに私のケースを残したいと思います。私の場合、問題はシステム権限にありました。VM内の共有フォルダーをリポジトリとして使用しました。許可が拒否されたなどのメッセージは他にありませんでした。すべてを試しましたが、ネットワークドライブを使用していることに気づきました。




0

Macでの私のケースでは、/ usr / local / libにログオンしたユーザーに読み取り/書き込み権限を付与することで修正されました

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.