From 58424a2daaea9c35f60a928957e088f15e07fd0d Mon Sep 17 00:00:00 2001 From: Maxime GRIS Date: Thu, 24 Feb 2022 13:18:57 +0100 Subject: [PATCH] fix/ global error in console when building web app only --- README.md | 37 ++++++++++++------------ angular.json | 27 ++++++++++++++--- angular.webpack.js | 2 +- app/package.json | 2 +- src/environments/environment.web.prod.ts | 4 +++ src/tsconfig.app.json | 4 ++- 6 files changed, 51 insertions(+), 25 deletions(-) create mode 100644 src/environments/environment.web.prod.ts diff --git a/README.md b/README.md index 9cb09f1d2..9a3fe66bc 100644 --- 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 index 94a38f2f9..dcc4c1506 100644 --- 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 index 23e22afc2..14198ebf0 100644 --- 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 index 1055d0f70..8988d2027 100644 --- 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 new file mode 100644 index 000000000..c74e228a5 --- /dev/null +++ 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 index a61f64a2c..343506087 100644 --- 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",