feat(webpackDevServer): Add watchOptions for webpackDevServer

[JSMike]

Add watchOptions to webpackDevServerConfiguration to conditionally enable polling option in watchpack
Remove additional blank lines from end of serve-watchpack.ts so that only one is remaining

[JSMike]

In cases where Angular CLI is running in a shared directory on linux VM on a windows host the webpack dev server isn't detecting file changes from the host environment. (ex: Whenever a docker dev environment is running on a windows host.)
This is solved by adding poll option to the webpack dev server configuration. By default when no poll interval is set watchpack will use native file system change detection. This change allows for setting the poll interval which will turn on polling.

With this change the following can be added to the defaults object in angular-cli.json to change the default polling option:

  "poll": 1000

When the poll option isn't included in angular-cli.json it will be set to the default, which is undefined, and native file system change detection will be used.

Here is the link to the webpack docks regarding watchOptions.poll:
https://webpack.github.io/docs/configuration.html#watchoptions-poll

Note: Also removed 4 out of the 5 blank lines at the end of the file that I'm assuming shouldn't be there.

Edit: Update change required for angular-cli.json

[JSMike]

Minor edit. instead of making all watchOptions configurable only make poll configurable. This will make configuration changes to angular-cli.json cleaner by only having to set a poll flag or interval

[JSMike]

rebased to master

[JSMike]

restarting travis

[JSMike]

Hi All,

The recent changes to config broke the change I made. I'm looking into it.

[hansl]

You need to update the schema JSON, not the d.ts. We're talking internally as to whether or not this change is wanted.

[JSMike]

@hansl should it be in both or just the schema?

As stated previously, without the change there's no direct way to have webpack detect changes on shared directories between linux/windows via a VM such as in docker development environments. With the common "poll" flag option in defaults it can be applied to other addons which may want to conditionally add polling for detecting file changes.

Please let me know if anything else is needed.

[JSMike]

Another note on polling, this may also resolve the watch issues for users developing in Window's 10's Ubuntu Usermode, I haven't tested that myself though. Reference

[JSMike]

This ends up causing a warning in SchemaClassFactory._createChildProperty when doing an ng serve because the function isn't built to handle a field that can be of more than one type. The example "type": [ "boolean", "number" ] is valid JSON Schema per http:https://jsonschemalint.com/draft5/

[JSMike]

I noticed that in a163186 the custom-typings.d.ts file defined poll as only being a number. I've updated all of my poll definitions to reflect this.

[JSMike]

I've updated this PR to reflect the typing decision made in a163186 to define the poll as only being a number and not also being boolean.

[simb]

Having this will also allow docker users to setup the toolchain and support the watched building. I'd love to see this get merged.

[monad98]

Without documentation, I don't know how to ignore "node_modules" directory. Can anyone tell me how to?
https://webpack.js.org/configuration/watch/#watchoptions-ignored

[JSMike]

@monad98 Currently there's no configuration options for this, the cli's webpack config would need to be updated to allow for setting this. https://github.com/angular/angular-cli/blob/master/packages/angular-cli/tasks/serve-webpack.ts#L100 and the other files from this PR to update the config schema.

A separate issue/PR should be created for this to examine if this is desired. By ignoring files here the bundle would not rebuild when files are changed, if new modules are added or if existing node_modules are updated IMO it should trigger a rebuild. I understand the expense of watching the entire node_modules directory structure for changes on some older machines, but I haven't personally seen much of a slowdown here. @hansl will need to weigh in on if this is something that's wanted.

[grantlucas]

Apologies for digging up this older PR but it's the first one with a comment that's my exact issue.

@monad98

Without documentation, I don't know how to ignore node_modules directory. Can anyone tell me how to? https://webpack.js.org/configuration/watch/#watchoptions-ignored

---

I'm running a Vagrant setup for a few things and consistently, if I use poll for webpack, I need to exclude node_modules or else it maxes out the CPU and over time will crash the VM as it eats up RAM.

When it comes to ng build, if I put --poll=1000 it sits at max CPU usage. Excluding node_modules has been the solution to this in the past for other Webpack setups. Personally, if node_modules changes, it'd be reasonable to restart the ng serve to ensure it's all set up properly.

@monad98 Were you ever able to resolve ignoring node_modules?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}