Integration with zone.js

[mgechev]

Hello guys! I'm using this project since recently and I'm really impressed how much it improves my productivity!

For the last few days we're planning to integrate browser-sync with the angular2-seed project. The integration was quite straight-forward thanks to your great examples directory and TypeScript typings.

The problem we experience is in the context of execution of the synchronization commands you invoke between the different browsers. Angular 2 intercepts all asynchronous calls using zone.js (such as WebSockets, XHR, browser events, etc.) and runs its dirty checking algorithm. This means that the dirty checking of Angular 2 is automatically run when you triggerClick, however, when you sync the values of input fields or submit a form the synchronization is broken.

Although it is not completely clear whether this issue should belong to the zone.js project or browser-sync, I opened it here since I found an inconsistent way of handing the different user events.

As possible solutions for integration of both projects (zone.js and browser-sync) I see:

1. Trigger all events manually with the same attributes as the source (I bet you have your reasons to not approach this way if you haven't done it yet).
2. Create a separate, Angular 2 specific, browser-sync-client which runs all the sync changes inside of a zone.
3. Wrap all sync commands inside asynchronous calls (setTimeout(fn, 0)). Although it seems quite dirty it should work in most cases.

I like solution two best since it will keep the current version of the client unchanged and only alter support for Angular 2.

Let me know what you think and keep the good work up!

[shakyShane]

@mgechev the upcoming v3 release is a re-write of all Browsersync libs - a key part of this will be the ability to swap out implementations of sync commands - so yes, in V3 this will be an easy problem to solve and help with 2

right now, if 3 actually works I'd be happy with that solution

[mgechev]

@shakyShane great! Looking forward for updates.

[shakyShane]

@mgechev tl;dr, i'll do anything needed to make it work with A2, providing it doesn't affect anything else (which I don't think 3 will)

[mgechev]

@shakyShane you can take a look at this discussion. There's also working integration of angular2-seed with browser-sync where you can reproduce the issues we have.

The problems were mostly in the "About" page where the new items are not added to the list properly. Also when you press enter the default behavior of the submit event is not prevented (not sure if this will be fixed by 3).

[shakyShane]

@mgechev I'll take a look, thanks