Find a way to solve the production errors once and for all

[itswillta]

The problem

Currently, the SPAs are randomly breaking in the production environment every other day due to Terser minifying the names of AngularJS dependencies.

The causes of these production errors are often really hard to find, especially when the one who is fixing it is not the one who has created it. This is not OK.

Suggested solutions

1. Setting up an E2E test

We can use something like Protractor which is an end-to-end test framework for Angular and AngularJS applications. The usage is quite straightforward.

However, here's a catch: This only guarantees the production build of that specific SPA doesn't break, while there are changes that can break the other SPAs as well, and running all the E2E tests for the related SPAs can be really time-consuming.

2. Using Babel to transform our code once and for all

We can use babel-plugin-angularjs-annotate to transform our code once and for all. This means that from then on, we'll need to change the injection array every time we change the dependencies of a service/factory/controller/etc.

3. Setting up a GitHub bot

The idea is that every time we open a pull request, there'll be a bot to remind us to run the production build for the related SPAs. This way the devs won't forget it anymore, and we won't put too much stress on the CI server.

[itswillta]

Since this problem is affecting us all, it will be nice for us to have a discussion to resolve this quickly. @tuanlc @chamerling @asmaNode @MichaelBailly @pbson @billyfrost418 @piavgh @rezk2ll @fabienmoyon

[piavgh]

2.

https://github.com/OpenPaaS-Suite/esn-frontend-contacts/blob/main/babel.config.json#L6 => we have babel-plugin-angularjs-annotate, don't we?

[tuanlc]

1. Not only time-consuming but also E2E does not guarantee that there is no error on PROD mode since we E2E test does not cover all the (small) features/businesses that errors happen once running them

2. :white_check_mark: I prefer this one since it is the AngularJS standard way to deal with Dependency Injection. So it is understandable if we use an explicit way instead of an implicit way that we are using.

3. Well. There is no mandatory PROD running steps so still, trust to developers :trollface:

[tuanlc]

4. One more solution. We now running unit-test by bundling (webpack) under DEV mode. How about using PROD mode to run tests.
   • There are components, directives tests, so they can detect injection error
   • We can provide option DEV mode bundling for devs to run on local

[chamerling]

1. It solves partially errors, there are some at runtime
2. This is not enough also, it will still work in dev mode and fail on prod in some cases if we forget some injections. Also, babel-plugin-angularjs-annotate writes really dirty code and doing it by hand is HUGEEEE
3. Not so useful
4. Adding a run step with PROD mode can solve some issues also