La scorsa settimana sono stato contattato da Carmine, il nostro consulente di Design e UX, che mi chiedeva supporto per un problema su un progetto Angular. Nello specifico, stava lavorando su un progetto con un backend abbastanza articolato, configurato sul suo Mac e gli erano stati segnalati dei problemi sulla UI, quando l’applicazione era eseguita su Firefox per Windows.
Dato che non voleva riconfigurare tutto su Windows per risolvere la segnalazione, la sua domanda è stata molto semplice: posso lanciare un’applicazione Angular su Mac ed eseguirla su una macchina Windows virtualizzata con Parallels? Per chi non conosce il mondo MAC, Parallels è il miglior virtualizzatore a pagamento per MacOS presente sul mercato. Come potete immaginare, la risposta è “si”, e la cosa è sia semplice che molto utile, soprattutto se dovete testare le vostre applicazioni anche su IE o Edge.
Quando eseguite un’applicazione generata con la CLI di Angular (ng serve per capirci), questa avvia Angular Live Development Server su localhost:4200:
Se lavorate con Angular e Docker, probabilmente già conoscete il parametro –host di ng serve, che serve a indicare l’host su cui il server deve essere in ascolto, il cui default è proprio localhost. Per il nostro scopo, possiamo usare l’IP della macchina host, ma, dato che questo può cambiare spesso, possiamo usare l’indirizzo 0.0.0.0, che indica di rispondere qualsiasi sia l’indirizzo da cui arriva la richiesta:
Se lanciate Windows su Parallels e aprite Firefox o Edge all’indirizzo della vostra macchina host, porta 4200, vedrete l’applicazione Angular in esecuzione:
Se cambiate il codice e salvate, vedrete che anche il live reload funziona, cosa che vi permette di testare le modifiche anche su Windows.
Visto che ci siamo, proviamo anche su IE. Scopriremo che, purtroppo, by default, l’applicazione non funziona…
Se è la prima volta che incrociate questo problema, probabilmente non testate le vostre applicazioni su IE. In realtà, nel template standard generato dalla CLI, esiste un file chiamato polyfill.ts, che contiene (commentate di default) le operazioni necessarie al funzionamento di Angular su IE9/IE10/IE11 e le versioni di Chrome < 5:
Un polyfill è una tecnica che vi permette di emulare delle funzionalità non presenti nei browser più vecchi. Se avete vissuto il passaggio ad HTML5, probabilmente conoscete la libreria Modernizr, la cui inclusione nel progetto permetteva da sola di far riconoscere i nuovi elementi semantici di HTML5.
Decommentando il codice, installando i pacchetti indicati nel file e leggendo i commenti (in alcuni casi va creato un file a parte per la configurazione di zone.js), l’applicazione funzionerà anche su Internet Explorer scendendo fino alla versione 9. Sotto la versione 9, il team non fornisce supporto. Bisogna anche dire che i polyfill impattano sulle performance dell’applicazione, quindi fateci sempre attenzione.
Happy Coding!
