Team insights: Angular, HTML5 mode, IE9 and Routing

One of the things that caused some mild consternation in our first Scrum sprint was Angular and IE9. For those unfamiliar with Scrum, it is a specific agile software development framework / methodology for managing product development.  A sprint is a specific period of time to carry out work.

Angular is compatible with all Internet Explorers after IE8.  But IE8 and IE9 are not HTML5 compliant, and therefore the methodology Angular used to make smoother web address (URL) calls didn’t work in those browsers.  Instead, Angular reverts to a “hash” mode, where a Hash (#) is used to delineate which part of a query string should be interpreted by Angular.

Normally, this would be seamless.  But since we configured Apache to forward the /apollo/ URL to the server hosting Angular and the API in front of Neo4J (our native graph database), we had updated our page references to hit “/apollo/faq” and “/apollo/main” and thus the hash was being put in front of the “apollo” instead of after it in HTML5 mode.

The fix was to take out HTML5 mode completely.  Then we could simply have links to Angular content be, for example, ‘#/faq’ and ‘#/main’ and ‘#/node/P1.’  To do this, we ended up having to make a single-line code change in how we created the module (essentially setting “html5mode” to ‘No’) but that broke many of the Angular AND Node.js routes and we ended up spending a significant amount of time spent looking at the “network” and “sources” tabs in Chrome Developer Tools to figure out what was broken and how to recast it.

This is the “steep learning curve once you have to work with the fundamental defaults” issue you may be hearing about, with regard to Angular.  We faced an additional challenge because we were coding all the HTML components with Jade and had everything in a Node.JS server configured to hide behind a path in Apache2.