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.

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.

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.