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.

Virtual Hosting Using Nginx Server

Nginx is a web server, which can also act as a reverse proxy, HTTP server, IMAP/POP3 proxy server as well as a load balancer. It is well known for its stability, high performance, simple configuration, rich feature set, and low resource consumption. So, we can deploy our web applications like HTML pages and PHP-related applications into this server directly.

Let’s see How to Configure the Nginx as a Reverse Proxy/Virtual Hosting Purpose

#1. Deploy the nginx application in any server (I am taking Ubuntu System).

#2. Choose any domain/sub-domain name, and do the C-name configuring that domain name to nginx server (Ubuntu System Port 80).

Note: Port 80 is the default port for nginx. If you change the port, you need to map the C-name according to that.

#3. Once C-name and nginx applications are ready, create a conf.d folder inside the nginx.

#4. Create a configuration file with the name of domain/sub-domain along with the .conf extension.

For example, if you want the application should work on ‘abc.mycompany.com,’ you have to create a configuration file with the name of ‘abc.mycompany.com.conf,’ and copy the below-given code and save the file.

   server {

      listen 80;

      server_name abc.mycompany.com;

   location / {


      proxy_http_version 1.1;

      proxy_read_timeout 300000;

      proxy_set_header Upgrade $http_upgrade;

      proxy_set_header Connection 'upgrade';

      proxy_set_header Host $host;

      proxy_cache_bypass $http_upgrade;



#5. Restart/reload the Nginx.

Now your application will work with the domain name based on your configuration.



Listen – Nginx port listener

Server_name – Domain name

Proxy_pass – Actual running application URL (domain name indirectly calls this URL)

Proxy_read_timeout – For long connection establishment (optional)

Nginx default connection timeout – 600 m.sec

Gatling Gun Is Now A Prospecting Tool for Testers

Testing is the most crucial part of an application development process to ensure high-quality, impeccable features. Therefore, along with the standard, integration, functional, and load tests, browser tests are also important in a company’s testing strategy. After developing the application, the substantial final task is to write & implement load tests.

To perform the load tests efficiently, a new tool, known as Gatling Tool, has been preferred now-a-days by many organizations. Gatling is an open-source load testing framework for analyzing and measuring the performance of applications. It is an easy to setup tool where simulations and scenarios are coded in simple domain-specific language (DSL). An attractive point of this tool is that you can just define and write up your performance test scenarios in the similar way as you do it with other test automation frameworks. You can thus generate readable and easy to maintain performance test code.


  • High performance
  • Scenario recorder and developer-friendly DSL
  • Ready-to-present HTML reports


  • HTTP
  • JMS
  • WebSockets
  • Server-sent events

Keeping It Portable

  • Gatling’s installation process is simple and doesn’t require machine-by-machine basis installation. Gatling libraries are available from a Maven repository.
  • Gatling is built on Scala, and the simulations also must be written in Scala
  • Gatling also provides us elegant and meaningful reports that are easy to analyze and understand what exactly is going on with the application.
  • Gatling integrates easily with Jenkins through the Jenkins-plugin and runs your tests through Gradle and Maven with the help of maven-plugin and gradle-plugin.

Let’s Have Deeper Look on it? 

Basically, Gatling can be structured in 4 different parts:

  1. HTTP protocol configuration – This defines the base URL that runs against your tests. Also, you can define other configurations such as user agent, language header, connection, and so on.
  2. Headers definition – This provides the headers with a request that has to be sent to the server. This is relevant because the headers add a bit of a load on servers that are testing.
  3. Scenario definition - The core of your test! A Scenario includes a group of actions (like GET, POST, etc.) that are executed to simulate user’s interaction with the application.
  4. Simulation definition - This defines the load (number of users) that concurrently executes your scenario for a period.


A simulation is a description of the load test, which describes how user populations runs; which scenario they execute and how new virtual users are injected. Here is an example of simulation definition:

Gatling Load Testing Tool

Steps to Install Gatling

Step 1

Download Gatling <Gatling 2.1.7 latest> based on your operating system (you need to have a JDK installed for Gatling; it requires, at least, JDK7u6)

Step 2

Extract zip and navigate to the <D:\gatling-charts-highcharts-bundle-2.1.7\bin> and run recorder (recorder.bat)

Gatling Load Testing Tool

Gatling Load Testing Tool

Step 3

Once the recorder is launched, the following GUI lets you configure how requests and responses are recording

Gatling Load Testing Tool

Step 4

Configure the recorder. All you need to do is start recorder and configure your browser to use Gatling Recorder’s proxy.

Step 5

Recording the scenario:

  • Browser your application URL
  • When you open the application, it will automatically start running the scenario
  • When the scenario playing is finished, click stop in the Recorder interface

Note: Try to act like a real user. Don’t jump from one page to another immediately without taking the time to read. This will make your scenario closer to real users’ behavior.

Gatling Load Testing Tool


The Simulation will get generate in the folder user-files/ simulations/ computer database of your Gatling installation, under the name BasicSimulation.scala.

Step 7

Running Gatling-

  • Launch the script located in the bin directory:
    • On Windows: %GATLING_HOME%\bin\gatling.bat
    • On Linux/Unix: $GATLING_HOME/bin/gatling.sh
  • You will see a menu with the simulation
  • Choose a simulation number(it depends on ur stimulation name):

[2] computerdatabase.BasicSimulation

Gatling Load Testing Tool

Gatling Load Testing Tool

Step 8

When the simulation is finished, the console will display a link to the HTML reports

It’s time to analyze

Reports will be generated in the Results folder

Gatling Load Testing Tool

Gatling Load Testing Tool

Gatling gives a complete analysis of each and every request with graphical representation (charts) in HTML files. Hence, they are portable and can be viewed on a web browser of any device.

Reports give us these details:

  • Active users over time
  • Response time distribution
  • Response time percentiles over time
  • Requests per second over time
  • Responses per second over time

At Vmoksha, we run the load tests as the final step according to our Quality Assurance strategy, and if performance is under an acceptable Margin, we push it to production.​ As we always move towards the goal of continuous delivery of Projects, we just need an effective tool that gives accurate test results. Gatling tool seems to be the best suitable tool to achieve precise outcomes and for our timely delivery of services.