Last week Carmine, our Design and UX consultant, contacted me to ask for support with a problem on an Angular project. In particular, he was working on a project with a well-structured backend, configured on his Mac, and he received problems notice on the UI, when the application is executed on Firefox for Windows.
Since he doesn’t want to configure all his applications on windows to solve the problem, his question was: can I launch an Angular application on a Mac and run it on a Windows machine virtualized with Parallels? For those who don’t know Mac’s world, Parallels is the best-paid virtualizer for MacOS on the market. Of course, the answer is “yes” and the solution is both simple and useful, especially if you need to test your applications on IE or Edge too.
When you execute an application generated with the Angular CLI (ng to be clear), this one starts Angular Live Development Server on localhost:4200:
If you are working with Angular and Docker, you probably already know the parameter –host of ng serve, that serves to indicate the host on which the server must be listening in, whose default is exactly localhost. For our scope, we can use the host machine IP, but, since it may change often, we can use the address 0.0.0.0, that indicates to answer to requests coming from any address:
If you launch windows on Parallels and you open Firefox or Edge, in the address of your host machine with port 4200, you can see that the Angular application is running:
If you change the code and save, you can see that the live reload works too, and this permits you test modifications on Windows too.
We can try also on IE, but we find out that the application doesn’t work by default, unfortunately.
If this is the first time you face this problem, maybe you usually don’t test your applications on IE. Actually, in the standard template generated from the CLI, there’s a file called polyfill.ts, that contains operations (commented by default) necessary to the operation of Angular on IE9/IE10/IE11 and Chrome versions < 5:
A polyfill is a technique, that allows you to emulate some functionalities, which are not present in the oldest browsers. If you experienced the passage to HTML5, you probably know the library Modernizr, the inclusion of which in the project permits to recognize new semantic elements in HTML5.
Uncommenting the code, installing the packages indicated in the file and reading comments (in some cases you need to create a file specific for the configuration of zone.js), the application will work on Internet Explorer too, until the version 9. There is no support from the team for versions previous to the 9th. It must be said that the polyfill impacts on applications performance, then you have to pay attention to that.
Happy Coding!
