Tuesday, February 21, 2017

Ionic serve: watch failed: A watch configured to watch the following paths failed to start

Today I had the problem that every time, I called ionic serve, I got the following error:
...
[10:28:18]  build dev finished in 52.67 s
[10:28:22]  watch failed: A watch configured to watch the following paths failed to start. It likely that a file
            referenced does not exist:
            ...\src\**\*.(ts|html|s(c|a)ss)
[10:28:22]  dev server running: http://localhost:8100/
I found the error creation in node_modules\@ionic\app-scripts\dist\watch.js. The function startWatcher rejects the promise, if the start of watching needs more than 3 seconds. This is (roundabout) the timespan between "build dev finished" and "watch failed".

So I thought my machine might be too slow and increased the timeout value to 30 seconds:
[10:33:49]  build dev finished in 53.87 s
[10:34:09]  lint finished in 20.95 s
[10:34:19]  watch failed: A watch configured to watch the following paths failed to start. It likely that a file
            referenced does not exist: ...\src\assets\**\*,
            ...\src\index.html,
            ...\src\manifest.json,
            ...\src\service-worker.js,
            ...\node_modules\ionicons\dist\fonts\**\*,
            ...\node_modules\ionic-angular\fonts\**\*,
            ...\node_modules\ionic-angular\polyfills\polyfills.js,
            ...\node_modules\sw-toolbox\sw-toolbox.js,
            ...\environments\api-dwp\settings.json,
            ...\node_modules\leaflet\dist\leaflet.css
[10:34:19]  dev server running: http://localhost:8100/
As you can see, the error is the same, this time after 30 seconds, but there are more files reported. And indeed, the files ...\src\manifest.json and ...\src\service-worker.js do not exist. They are part of the default node_modules\@ionic\app-scripts\config\copy.config.js.

It seems, I have 2 possibilities now:
  • add the 2 files to my app
  • modify the copy.config.js

Since I have already a custom copy.config.js, and since I do not want to litter my source code with unneeded files, I used the second approach. In the copy.config.js, I had to override the key copyIndexContent (just remove '{{SRC}}/manifest.json' and '{{SRC}}/service-worker.js'):
copyIndexContent: {
  src: ['{{SRC}}/index.html'],
  dest: '{{WWW}}'
},
Now ionic serve didn't produce watch errors any more:
[11:19:40]  build dev finished in 50.56 s
[11:19:51]  watch ready in 62.29 s
[11:19:51]  dev server running: http://localhost:8100/
As you can see, the timespan for starting the watching is 11 seconds. So my modification of node_modules\@ionic\app-scripts\dist\watch.js is still needed.

Update 23-Feb-2017

Starting with version 1.1.4 of @ionic/app-scripts, there is a new option --startWatchTimeout to the ionic command. Instead of modifying the file node_modules\@ionic\app-scripts\dist\watch.js (which is not very reliable, anyway), it's enough to add the additional parameter: ionic serve --startWatchTimeout 30000.

See Issue 772.

No comments:

Post a Comment