web_gui build is broken
lalten opened this issue · 5 comments
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:
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:
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.
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.
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.
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-pluginAt 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.
I think it would make a lot of sense to add a CI check that ensures npm run build always works.
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.