fix/ global error in console when building web app only

maximegris · Feb 24, 2022 · 58424a2 · 58424a2
1 parent 4964bae
commit 58424a2
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -14,12 +14,14 @@
 
 # Introduction
 
-Bootstrap and package your project with Angular 13 and Electron 16 (Typescript + SASS + Hot Reload) for creating Desktop applications.
+Bootstrap and package your project with Angular 13 and Electron 17 (Typescript + SASS + Hot Reload) for creating Desktop applications.
+
+![Angular Electron Demo](https://s10.gifyu.com/images/angular-electron.gif)
 
 Currently runs with:
 
-- Angular v13.0.0
-- Electron v16.0.0
+- Angular v13.2.4
+- Electron v17.1.0
 
 With this sample, you can:
 
@@ -75,10 +77,10 @@ You can disable "Developer Tools" by commenting `win.webContents.openDevTools();
 
 ## Project structure
 
-|Folder|Description|
-| ---- | ---- |
-| app | Electron main process folder (NodeJS) |
-| src | Electron renderer process folder (Web / Angular) |
+| Folder | Description                                      |
+|--------|--------------------------------------------------|
+| app    | Electron main process folder (NodeJS)            |
+| src    | Electron renderer process folder (Web / Angular) |
 
 ## How to import 3rd party libraries
 
@@ -104,13 +106,12 @@ Maybe you only want to execute the application in the browser with hot reload? J
 
 ## Included Commands
 
-|Command|Description|
-| ---- | ---- |
-|`npm run ng:serve`| Execute the app in the browser |
-|`npm run build`| Build the app. Your built files are in the /dist folder. |
-|`npm run build:prod`| Build the app with Angular aot. Your built files are in the /dist folder. |
-|`npm run electron:local`| Builds your application and start electron
-|`npm run electron:build`| Builds your application and creates an app consumable based on your operating system |
+| Command                  | Description                                                                                           |
+|--------------------------|-------------------------------------------------------------------------------------------------------|
+| `npm run ng:serve`       | Execute the app in the web browser (DEV mode)                                                         |
+| `npm run web:build`      | Build the app that can be used directly in the web browser. Your built files are in the /dist folder. |
+| `npm run electron:local` | Builds your application and start electron locally                                                    |
+| `npm run electron:build` | Builds your application and creates an app consumable based on your operating system                  |
 
 **Your application is optimised. Only /dist folder and NodeJS dependencies are included in the final bundle.**
 
@@ -124,9 +125,9 @@ Then use your library by importing it in `app/main.ts` file. Quite simple, isn't
 
 E2E Test scripts can be found in `e2e` folder.
 
-|Command|Description|
-| ---- | ---- |
-|`npm run e2e`| Execute end to end tests |
+| Command       | Description               |
+|---------------|---------------------------|
+| `npm run e2e` | Execute end to end tests  |
 
 Note: To make it work behind a proxy, you can add this proxy exception in your terminal  
 `export {no_proxy,NO_PROXY}="127.0.0.1,localhost"`
@@ -152,7 +153,7 @@ Please note that Hot reload is only available in Renderer process.
 - Angular 10 & Electron 9 : Branch [angular10](https://github.com/maximegris/angular-electron/tree/angular10)
 - Angular 11 & Electron 12 : Branch [angular11](https://github.com/maximegris/angular-electron/tree/angular11)
 - Angular 12 & Electron 16 : Branch [angular12](https://github.com/maximegris/angular-electron/tree/angular12)
-- Angular 13 & Electron 16 : (master)
+- Angular 13 & Electron 17 : (master)
 
 [maintained-badge]: https://img.shields.io/badge/maintained-yes-brightgreen
 [license-badge]: https://img.shields.io/badge/license-MIT-blue.svg

diff --git a/angular.json b/angular.json
@@ -54,6 +54,22 @@
                 }
               ]
             },
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            },
             "web": {
               "optimization": false,
               "outputHashing": "none",
@@ -70,7 +86,7 @@
                 }
               ]
             },
-            "production": {
+            "web-production": {
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -82,7 +98,7 @@
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
+                  "with": "src/environments/environment.web.prod.ts"
                 }
               ]
             }
@@ -97,11 +113,14 @@
             "dev": {
               "browserTarget": "angular-electron:build:dev"
             },
+            "production": {
+              "browserTarget": "angular-electron:build:production"
+            },
             "web": {
               "browserTarget": "angular-electron:build:web"
             },
-            "production": {
-              "browserTarget": "angular-electron:build:production"
+            "web-production": {
+              "browserTarget": "angular-electron:build:web-production"
             }
           }
         },

diff --git a/angular.webpack.js b/angular.webpack.js
@@ -24,7 +24,7 @@ module.exports = (config, options) => {
     config.plugins = [
         ...config.plugins,
         new NodePolyfillPlugin({
-			excludeAliases: ["console"]
+			  excludeAliases: ["console"]
 		})
     ];
 

diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-electron",
-  "version": "10.4.1",
+  "version": "10.5.0",
   "main": "main.js",
   "private": true,
   "dependencies": {}

diff --git a/src/environments/environment.web.prod.ts b/src/environments/environment.web.prod.ts
@@ -0,0 +1,4 @@
+export const APP_CONFIG = {
+  production: true,
+  environment: 'WEB-PROD'
+};
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
@@ -3,7 +3,9 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "baseUrl": "",
-    "types": []
+    "types": [
+      "node"
+    ]
   },
   "files": [
     "main.ts",