WebComponent Vs Angular Formly – Issues in Displaying Forms in Firefox and Safari Browsers

I would like to share a quite interesting stuff with you pertaining to Angular Formly. We at Vmoksha Technologies have set our goal to write optimized code lines with quality. To attain our goal, we as a team, lean towards using new techniques that are contemporary to today’s software development.

One such framework is Angular.js, a quite interesting framework, which we have used in our recent web projects. As an extension to it, we went ahead exploring the feature that lets you generate the HTML forms – Angular-Formly.


Smooth Sail, until you hit rock bottom!

Yes. During the testing phase with multiple browsers and their versions, our quality control team figured out certain browsers such as FIREFOX and SAFARI, which won’t display the HTML forms generated by Angular-Formly. We could have just ignored this and continued with our efforts putting up a disclaimer stating that the project is supported by certain browsers and versions.

But, that doesn’t support the objective of the project. In Vmoksha, “Failure is not an option” (NASA’s mission statement) is the mantra, and we wanted to get this resolved. Questions raised, discussions held to figure out the root cause of the issue. As always, we approached Guru Google as well as developers in multiple forums, for a solution. But, Lady Luck didn’t turn her face towards us for more than a week.


Whether the culprit is Angular-Formly or Browsers in scope?

With no potential hint about the root cause as well as a solution, we could think of one possibility, and that is, “Resolve it yourself”;


Yes, we found it, fixed it and tested it. FIREFOX, SAFARI – OK.

I could hear your mind; tell us the secret, buddy. I know you are thinking about -

What was the root cause? How did you resolve the issue?

Read on, as I keep explaining the data points behind using Angular-Formly, identifying the root cause and providing the fix.


Why we used Angular-Formly?

Even an expert HTML developer would agree that the process of repeating the same block of html code is really frustrating and non-contemporary.

“Angular-Formly is a JavaScript Powered forms for AngularJS; it lets you generate html forms automatically without much of an effort.”

Angular-Formly does just that, it reduces the effort of writing HTML forms and delivers it the way we want it. Customising Formly might seem difficult, but once you achieve it, you can reuse as long as you wish to use it. It does take few parameters and draws the HTML form for you on screen.


How did we resolve the browser issue?

The below images depict the scenarios of our implementation of Angular-Formly forms in different browsers:

In Chrome:

Angular formly

In Firefox and Safari:

Angular formly

Our approach to resolving the issue kick-started with the following questions:

  1. Is it the CSS that we are using in the project?
  2. Could it be a problem with the version of Angular-Formly used in the project?
  3. Maybe Angular-Formly doesn’t support FireFox and Safari. Did we check it?
  4. An overlap of a JS or CSS is possible. Who knows?

The last question ignited a thought in our minds. Eventually, we nailed down the root cause of the issue as we kept analysing each JS file referred to the project. We found something striking – WebComponents.js and ran the project excluding the component. To our astonishment, the Angular forms displayed seamlessly in all browsers including FIREFOX and SAFARI. So, we extended our research on the use of the component, its source, and impact.


Root Cause of the issue

In our project, we have a placeholder to show maps, and for that very reason, we had Google-Map bower component installed with a list of dependencies.


Subsequently, the Polymer dependency bower components got installed, and one such dependency file is the “WebComponents.js” [an optional dependency item]

  	"type": "git",              
        "url": "https://github.com/Polymer/polymer.git"   
        "web-component-tester": "*",                         
        "iron-component-page": "polymerElements/iron-component-page#^1.1.6"          


About Webcomponent.js

WebComponents.js is a set of polyfills that is built on top of the Web Components specifications. Web components assist you in creating your own custom HTML elements. Instead of loading your sites with verbose mark-ups, repetitive code, and long scripts you wrap up everything into neat little custom HTML elements.


Final Fix

Note: The WebComponents.js polyfill layer is no longer needed for browsers that fully implement the Web
Components APIs, such as Chrome 36+

So, we excluded the WebComponent.js script from the project. Since then the Angular-Formly form is working seamlessly in all the modern browsers.

Hope, this write up helped you to learn something out of our experience and also, to resolve the issue.

Thanks, for reading our blog. Watch this space as we continue our journey in building robust applications with an objective and quality.