Update Desktop webpack to v5 and Angular to v13

desktop/config/webpack.common.mjs

@@ -0,0 +1,58 @@
+import * as helpers from "./helpers.js";
+import linkerPlugin from '@angular/compiler-cli/linker/babel';
+import webpack from "webpack";
+
+const rules = {
+    html: {
+        test: /(\.html$)|(\.template$)/,
+        type: "asset/source",
+        exclude: [/node_modules/, helpers.root("src/app/index.html")],
+    },
+    json: {
+        test: /\.json$/,
+        type: "asset/source",
+        exclude: [/node_modules/],
+    },
+    file: {
+        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        type: "asset/resource",
+    },
+    font: {
+        test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
+        type: "asset"
+    },
+    // Added to support partial compiled code, https://github.com/angular/angular/issues/44026
+    // https://v13.angular.io/guide/creating-libraries#consuming-partial-ivy-code-outside-the-angular-cli
+    mjs: {
+        test: /\.m?js$/,
+        exclude: /sloppy.js/,
+        use: {
+            loader: 'babel-loader',
+            options: {
+                plugins: [linkerPlugin],
+                compact: false,
+                cacheDirectory: true,
+            }
+        }
+    }
+};
+
+export const commonRules = [
+    rules.html, rules.json, rules.file, rules.font, rules.mjs
+];
+
+export const defineEnv = function(env) {
+    return new webpack.DefinePlugin({
+        "ENV": JSON.stringify(env),
+        "process.env": {
+            "ENV": JSON.stringify(env),
+            "NODE_ENV": JSON.stringify(env),
+            "RENDERER": JSON.stringify(true),
+            "HOT": helpers.hasProcessFlag("hot"),
+            "BE_ENABLE_A11Y_TESTING": process.env.BE_ENABLE_A11Y_TESTING,
+        },
+    });
+};
+
+// exports.rules = rules;
+// exports.commonRules = commonRules;

desktop/config/webpack.config.app-base.mjs

@@ -0,0 +1,65 @@
+
+import webpack from "webpack";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import CopyWebpackPlugin from "copy-webpack-plugin";
+import { AngularWebpackPlugin } from "@ngtools/webpack";
+import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
+import { merge } from "webpack-merge";
+import config from "./webpack.config.base.mjs";
+import * as helpers from "./helpers.js";
+import path from "path";
+
+const isDevServer = helpers.isWebpackDevServer();
+const AOT = !isDevServer;
+const METADATA = {
+    baseUrl: "/",
+    isDevServer: isDevServer,
+    AOT,
+};
+
+const appBaseConfig = merge(config, {
+    entry: {
+        "polyfills": "./src/app/polyfills.browser",
+        "app": "./src/app/app.ts",
+    },
+
+    plugins: [
+        new MonacoWebpackPlugin(),
+        new AngularWebpackPlugin({
+            // skipCodeGeneration: !AOT,
+            tsconfig: "./tsconfig.browser.json",
+            // mainPath: "./src/app/app.ts",              // will auto-detect the root NgModule.
+            compilerOptions:{
+                sourceMap: true,
+            }
+            // forkTypeChecker: !AOT,
+        }),
+        new CopyWebpackPlugin({
+            patterns: [
+                { context: "src/client/splash-screen", from: "**/*.(html|svg)", to: "client/splash-screen" },
+                { context: "src/client/recover-window", from: "**/*.(html|svg)", to: "client/recover-window" },
+                { context: "src/client/proxy", from: "**/*", to: "client/proxy" },
+                { context: "src/client/resources", from: "**/*", to: "client/resources" },
+                { context: "src/app/assets", from: "**/*", to: "assets" },
+            ]
+        }),
+        new HtmlWebpackPlugin({
+            template: "src/app/index.html",
+            chunksSortMode: (a, b) => {
+                const entryPoints = ["app", "vendor", "styles", "sw-register", "polyfills", "inline"];
+                return entryPoints.indexOf(b) - entryPoints.indexOf(a);
+            },
+            inject: "body",
+            metadata: METADATA,
+        }),
+        // Workaround for WARNING Critical dependency: the request of a dependency is an expression
+        new webpack.ContextReplacementPlugin(/ajv(\\|\/)lib/, helpers.root("config")),
+        new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, helpers.root("config")),
+        new webpack.ContextReplacementPlugin(/encoding/, helpers.root("config")),
+        new webpack.LoaderOptionsPlugin({
+            debug: true,
+        }),
+    ],
+    target: "electron-renderer",
+});
+export default appBaseConfig;

desktop/config/webpack.config.base.mjs

@@ -0,0 +1,34 @@
+import * as helpers from "./helpers.js";
+import * as path from "path";
+// const { commonRules } = require("./webpack.common.js");
+import { commonRules } from "./webpack.common.mjs";
+
+export default {
+    resolve: {
+        extensions: [".ts", ".js", ".json", ".scss", ".css", ".html"],
+        modules: [helpers.root(), helpers.root("src"), "node_modules"],
+        alias: {
+            // Prevent duplicate copies of react from being resolved
+            // (See https://github.com/facebook/react/issues/13991)
+            react: path.resolve("../node_modules/react"),
+            "react-dom": path.resolve('../node_modules/react-dom'),
+            // Since we are patching the core-util module' isNode variable,
+            // we need to make sure that the patched version is used by all
+            "@azure/core-util": path.resolve('./node_modules/@azure/core-util'),
+        },
+    },
+    module: {
+        rules: [
+            {
+                test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
+                loader: '@ngtools/webpack',
+                exclude: [/\.spec\.ts/, /src\/test\//]
+            },
+            ...commonRules,
+        ],
+    },
+    stats: {
+        errorDetails: true,
+    },
+};
+

desktop/config/webpack.config.dev.js → desktop/config/webpack.config.dev.mjs

@@ -1,30 +1,34 @@
-const config = require("./webpack.config.base");
-const path = require("path");
-const merge = require("webpack-merge");
-const WriteFilePlugin = require("write-file-webpack-plugin");
-const { defineEnv } = require("./webpack.common");
-const EvalSourceMapDevToolPlugin = require("webpack/lib/EvalSourceMapDevToolPlugin");
-
-merge.strategy({ plugins: "replace" });
+import config from "./webpack.config.app-base.mjs";
+import { merge } from "webpack-merge";
+import { defineEnv } from "./webpack.common.mjs";
+import EvalSourceMapDevToolPlugin from "webpack/lib/EvalSourceMapDevToolPlugin.js";
+import * as helpers from "./helpers.js";
 
 const ENV = "development";
 const host = "localhost";
 const port = process.env.PORT || 3178;
+console.log('dirname', helpers.root());
+export default merge(config, {
 
-module.exports = merge(config, {
-    // devtool: "cheap-module-source-map",
     mode: "development",
+    devtool: "eval-source-map",
     devServer: {
         host,
         port,
-        stats: {
-            // Angular emits warning which are spaming the console
-            warnings: false,
+        // static: {
+        //     directory: path.join(__dirname, 'app')
+        // },
+        client: {
+            logging: "error"
+        },
+        devMiddleware: {
+            writeToDisk: (filePath) => {
+                return /vendor\/vs.*/.test(filePath);
+            }
         },
-        clientLogLevel: "error",
     },
     output: {
-        path: path.join(__dirname, "../build/"),
+        path: helpers.root("build"),
         filename: "[name].js",
         sourceMapFilename: "[name].js.map",
         chunkFilename: "[id].chunk.js",
@@ -33,11 +37,11 @@ module.exports = merge(config, {
         rules: [
             {
                 test: /\.scss$/,
-                loader: [
+                use: [
                     {
                         loader: "style-loader",
                         options: {
-                            singleton: true,
+                            injectType: "singletonStyleTag",
                         },
                     },
                     "css-loader",
@@ -46,11 +50,11 @@ module.exports = merge(config, {
             },
             {
                 test: /\.css$/,
-                loader: [
+                use: [
                     {
                         loader: "style-loader",
                         options: {
-                            singleton: true,
+                            injectType: "singletonStyleTag",
                         },
                     },
                     "css-loader",
@@ -63,9 +67,6 @@ module.exports = merge(config, {
             moduleFilenameTemplate: "[resource-path]",
             sourceRoot: "webpack:///"
         }),
-        defineEnv(ENV),
-        new WriteFilePlugin({
-            test: /vendor\/vs.*/
-        }),
+        defineEnv(ENV)
     ],
 });