Posted on

Setup Virtual Machine for testing browser Microsoft Edge version 18

I needed to test a locally developed website in old legacy browser Microsoft Edge version 18. My system is Windows 10 using Oracle VM VirtualBox software.

Here is how to setup the Virtual Machine for accessing an Angular website on the “localhost” hostname. The website also makes requests to a localhost Java based REST API. E.g. upon entering http://localhost:4200 in the VM it should work the same as in the host OS.

Download Edge Virtual Machine

VirtualBox software: Oracle VM VirtualBox software
Edge Image: https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
Use the “Virtualbox” VM image.
Direct link:
https://az792536.vo.msecnd.net/vms/VMBuild_20190311/VirtualBox/MSEdge/MSEdge.Win10.VirtualBox.zip
The VM password is: Passw0rd!

Make Angular development server available as “localhost” in the VM

Setup network:
In Oracle VM VirtualBox -> Settings -> network -> Attached to: “NAT”

Advanced -> port forwarding:
Name:”Angular server”, Protocol: TCP, Host port: 4200, Guest port: 4200
(dont set host and guest IP)

The above makes the Angular web development server (ng serve) available on http://localhost:4200 in the VM.

Make a Java Spring backend API available as “localhost” in the VM

(In the VM environment)
Add to the c:\windows\system32\drivers\etc\hosts file:

The above config tells the VM OS to expose all requests of 10.0.2.2 to the “outer” hosting machine.

(In the VM environment)
Start an elevated cmd and enter this:

The above command will forward all requests for localhost:8081 to 10.0.2.2:8081 (which the hosts file made available for the “outer” host OS).

Posted on

Angular *ngFor calling method multiple times problem

Background:
When using *ngFor directive try to avoid using methods inside the *ngFor loop.
When methods are used inside the *ngFor template databinding Angular triggers the method on every possible change detection. Angular does this because a method has side effects, its “impure”. Angular don’t know if the return value of the method has changed, and triggers a change detection check as often as possible.

Result:
If you set a console.log() inside your method that is called from within a *ngFor loop and tries to trigger some sort of change detection interaction (e.g. component init, click or mouse scroll depending on component implementation). You will see that the method is being triggered many more times than expected.

Example problem:
(heroes.component.html)

(heroes.component.ts)

The console.log will log 21 times on init and another 20 times for every “click”. The expected result is 10 console.logs upon init.

Above example could be fixed by instead calling the name property on the iterated variable (hero):

Solution:
Use a property inside the *ngFor directive instead, so prepare a collection with correct data and save to properties instead of using methods. So the template will iterate over an already “prepared” model collection.

If call on method inside the *ngFor directive is hard to avoid, at least make sure the code is fast and is performant since it will be called many, many times in a row.

Source: https://www.reddit.com/r/Angular2/comments/59532r/function_being_called_multiple_times/