web_gui build is broken

[lalten]

As pointed out in #1036, the web_gui does not currently build.

The web gui dependencies really should get some attention, they are severely outdated.
One big item is node-sass, which is pinned at 4.8.3:

openhtf/openhtf/output/web_gui/package.json

Line 73 in e724173

"node-sass": "^4.8.3",

Node-sass 4.8.3 supports only up to Node 9 (https://github.com/sass/node-sass/releases/tag/v4.8.3), and indeed building it during npm install will fail with a newer Node. Luckily it's easy to switch node versions with n

However even with node-sass built, the web gui is broken on master.
npm run build fails with:

ERROR in js/vendor.6e12e27800e23a08245f.js from UglifyJs
Unexpected token name «key», expected punc «;» [./~/@angular/core/fesm2015/core.js:18,0][js/vendor.6e12e27800e23a08245f.js:1051,13]

ERROR in [at-loader] ./src/app/plugs/user-input-plug.component.ts:46:27 
    TS2304: Cannot find name 'SafeHtml'.

The SafeHtml error is easily fixed by cherry-picking #1035

The Uglify.js error is a little harder. The problem seems to be that it does not support ES6 (https://stackoverflow.com/a/59156371/5559867), which is curious because tsc will still compile to ES5:

openhtf/openhtf/output/web_gui/tsconfig.json

Line 3 in e724173

"target": "ES5",

It turns out that

❯ npx rimraf dist && npx webpack --progress --profile --bail

seems to work, while npm run build (which should invoke the same, see below) fails.

openhtf/openhtf/output/web_gui/package.json

Line 5 in e724173

"build": "rimraf dist && webpack --progress --profile --bail",

There are a few more problems with the scripts in the package.json.
E.g. there is some protractor e2e stuff, but no protractor config file, so this won't work.

Same with karma, at first npm run test will complain about

Error: yargs parser supports a minimum Node.js version of 10. Read our version support policy: https://github.com/yargs/yargs-parser#supported-nodejs-versions

Remember, we have to use Node 9 for node-sass. But anyways, let's temporarily upgrade to Node 10. Karma starts:

20 09 2022 21:59:52.105:INFO [karma-server]: Karma v6.4.0 server started at http://localhost:9876/

And immediately fails with

Karma v 6.4.0 - connected; test: karma_error You need to include some adapter that implements __karma__.start method!;

which happens because it turns out there is no karma config file either.

In a nutshell, the state of the webinterface build is a mess and really needs some love.

[lalten]

It looks like running webpack directly works because the failing uglify js is only called when isProd is true, which is not the case when invoking directly instead of via npm run build.

openhtf/openhtf/output/web_gui/webpack.config.js

Line 19 in e724173

var isProd = ENV === 'build';

[lalten]

You can replace Uglify (which is a dead and unmaintained project anyways) with Terser, specifically the legacy webpack plugin (without upgrading webpack).

❯ npm install terser-webpack-plugin-legacy --save-dev
❯ npm install webpack@3 --save-dev

diff --git a/openhtf/output/web_gui/webpack.config.js b/openhtf/output/web_gui/webpack.config.js
index 4bcdec1..a3a9b9a 100644
--- a/openhtf/output/web_gui/webpack.config.js
+++ b/openhtf/output/web_gui/webpack.config.js
@@ -8,6 +8,7 @@ var autoprefixer = require('autoprefixer');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin-legacy');
 
 /**
  * Env
@@ -270,7 +271,8 @@ module.exports = function makeWebpackConfig() {
 
       // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
       // Minify all javascript, switch loaders to minimizing mode
-      new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: { keep_fnames: true }}),
+      new TerserPlugin({sourceMap: true, terserOptions: { keep_fnames: true }}),
+
 
       // Copy assets from the public folder
       // Reference: https://github.com/kevlened/copy-webpack-plugin

At this point, npm run build works again. However, the next problem is that the UI does not load. It crashes on
Uncaught Error: StaticInjectorError[{provide:CompilerFactory, useClass:JitCompilerFactory}]: 'deps' required.

This is something about Angular, but I don't know how to fix this.

[lalten]

OK it turns out if you also revert #1014 and the change in openhtf/output/web_gui/src/app/stations/station/station.component.spec.ts from #1004 the build works again.

[lalten]

I think it would make a lot of sense to add a CI check that ensures npm run build always works.

[glados-verma]

Currently the node version needs to be downgraded to 9 in order to successfully build. #1024 might help with that, I will take a look.