#395 - require is not defined

Add support for @angular-builders/custom-webpack
Setup environment target based on env params
Remove direct code changeing scripts postinstall/postinstall-web

Author: Yuri Cherepanov

angular.json

@@ -9,7 +9,7 @@
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "outputPath": "dist",
             "index": "src/index.html",
@@ -27,7 +27,10 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "customWebpackConfig": {
+              "path": "./angular.webpack.js"
+            }
           },
           "configurations": {
             "dev": {
@@ -47,6 +50,23 @@
                 }
               ]
             },
+            "dev-web": {
+              "optimization": false,
+              "outputHashing": "all",
+              "sourceMap": true,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": false,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.web.ts"
+                }
+              ]
+            },
             "production": {
               "optimization": true,
               "outputHashing": "all",
@@ -67,14 +87,17 @@
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "browserTarget": "angular-electron:build"
           },
           "configurations": {
             "dev": {
               "browserTarget": "angular-electron:build:dev"
             },
+            "dev-web": {
+              "browserTarget": "angular-electron:build:dev-web"
+            },
             "production": {
               "browserTarget": "angular-electron:build:production"
             }
@@ -87,7 +110,7 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular-builders/custom-webpack:karma",
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills-test.ts",
@@ -104,7 +127,11 @@
               "src/favicon.icns",
               "src/favicon.256x256.png",
               "src/favicon.512x512.png"
-            ]
+            ],
+            "customWebpackConfig": {
+              "path": "./angular.webpack.js",
+              "target": "web"
+            }
           }
         },
         "lint": {

angular.webpack.js

@@ -0,0 +1,24 @@
+/**
+ * Custom angular webpack configuration
+ */
+
+module.exports = (config, options) => {
+    config.target = 'electron-renderer';
+    if (options.customWebpackConfig.target) {
+        config.target = options.customWebpackConfig.target;
+    } else if (options.fileReplacements) {
+        for(let fileReplacement of options.fileReplacements) {
+            if (fileReplacement.replace !== 'src/environments/environment.ts') {
+                continue;
+            }
+
+            let fileReplacementParts = fileReplacement['with'].split('.');
+            if (['dev', 'prod', 'test', 'electron-renderer'].indexOf(fileReplacementParts[1]) < 0) {
+                config.target = fileReplacementParts[1];
+            }
+            break;
+        }
+    }
+
+    return config;
+}

package.json

@@ -17,28 +17,27 @@
   "main": "main.js",
   "private": true,
   "scripts": {
-    "postinstall": "npm run postinstall:electron && electron-builder install-app-deps",
-    "postinstall:web": "node postinstall-web",
-    "postinstall:electron": "node postinstall",
+    "postinstall": "electron-builder install-app-deps",
     "ng": "ng",
-    "start": "npm run postinstall:electron && npm-run-all -p ng:serve electron:serve",
-    "build": "npm run postinstall:electron && npm run electron:serve-tsc && ng build",
+    "start": "npm-run-all -p ng:serve electron:serve",
+    "build": "npm run electron:serve-tsc && ng build",
     "build:dev": "npm run build -- -c dev",
     "build:prod": "npm run build -- -c production",
     "ng:serve": "ng serve",
-    "ng:serve:web": "npm run postinstall:web && ng serve -o",
+    "ng:serve:web": "ng serve -c dev-web -o",
     "electron:serve-tsc": "tsc -p tsconfig-serve.json",
     "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve",
     "electron:local": "npm run build:prod && electron .",
     "electron:linux": "npm run build:prod && electron-builder build --linux",
     "electron:windows": "npm run build:prod && electron-builder build --windows",
     "electron:mac": "npm run build:prod && electron-builder build --mac",
-    "test": "npm run postinstall:web && ng test",
+    "test": "ng test",
     "e2e": "npm run build:prod && mocha --timeout 300000 --require ts-node/register e2e/**/*.spec.ts",
     "version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
     "lint": "ng lint"
   },
   "devDependencies": {
+    "@angular-builders/custom-webpack": "^8.2.0",
     "@angular-devkit/build-angular": "0.803.6",
     "@angular/cli": "8.3.6",
     "@angular/common": "8.2.12",

postinstall-web.js

@@ -0,0 +1,9 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `index.ts`, but if you do
+// `ng build --env=prod` then `index.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const AppConfig = {
+  production: false,
+  environment: 'DEV'
+};