For Angular2, why do two pages (two tabs) having the same component affect each other?

Question

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.

Cohbert

This even happens in case of different browser on another PC in a network too. any avoidance of this strange feature? – Rebeckarebeka

@Rebeckarebeka see Gary's answer: https://mcmap.net/q/1072042/-for-angular2-why-do-two-pages-two-tabs-having-the-same-component-affect-each-other – Monoicous

Answer 1

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.

Amphibology

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? – Cohbert

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. – Amphibology

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) – Cohbert

yes! , I think it's just not supported yet by BrowserSync, you can report a bug at their github repo. – Amphibology

Answer 2

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.

Berkly