10

This is an Angular2 app, and the component is simplified here as:

@Component({
    selector: 'courses',
    template: `
        <input [(ngModel)]="wahla">
        <input [(ngModel)]="wahla">
        {{ wahla }}
        `
})
export class CoursesComponent {
    wahla = "hmm hmm ha ha";
}

I think the app works fine in one page with the two-way binding, but if I open up another tab with http://localhost:3000/ and then paste something or type something in the first page's first input box, then the second tab actually gets updated for its first input box, while the 2nd input box and the static text do not update.

For the first tab, everything is updated as expected.

Is this supposed to happen or what might be wrong? This is running using npm start which is running a lite-server with BrowserSync.

Ankit Singh
  • 24,525
  • 11
  • 66
  • 89
nonopolarity
  • 146,324
  • 131
  • 460
  • 740

2 Answers2

10

That is a functionality of lite-server and not a bug or something as it might appear to be one.

To make this happen lite-server uses a javascript extention Browsersync.

On lite-server's npm page it is mentioned like this

lite-server is a simple customized wrapper around BrowserSync to make it easy to serve SPAs.

and BrowserSync puts it on their website like this

Time-saving synchronised browser testing

and this clears all the clouds of doubt

With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks.

Ankit Singh
  • 24,525
  • 11
  • 66
  • 89
  • however, tab one shows all values sync'ed, but tab two shows only input box 1's value changed and input box 2 and the static text inconsistent with the value in input box 1? – nonopolarity Apr 21 '16 at 14:11
  • that's probably because , whatever `BroswerSync` is doing is out of the scope of `angular` or more specifically `zone.js`' angular zone. So the changes are made directly in the `DOM` which doesn't trigger a `change detection` in angular, hence inconsistent values. – Ankit Singh Apr 21 '16 at 15:48
  • are you able to reproduce it too? Then I consider it somewhat of a bug, either for Angular2 or for BrowserSync, because supposedly, all 3 values should be identical (all bound by 2-way binding) – nonopolarity Apr 21 '16 at 16:03
  • 1
    yes! , I think it's just not supported yet by BrowserSync, you can report a bug at their [github repo](https://github.com/BrowserSync/browser-sync). – Ankit Singh Apr 21 '16 at 16:32
5

You can change the sync settings by visiting http://localhost:3001 . This is the user interface to change the browser-sync settings. Once you load http://localhost:3001, you can navigate to "Sync Options" and change the settings for "Browser-Sync" here.

Gary
  • 71
  • 1
  • 6