merge master

.eslintrc.json

@@ -0,0 +1,67 @@
+{
+  "env": {
+      "browser": true,
+      "node": true,
+      "es6": true,
+      "es2017": true
+  },
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking"
+      ],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "ecmaVersion": 10,
+        "project": [
+          "./tsconfig.serve.json",
+          "./src/tsconfig.app.json",
+          "./src/tsconfig.spec.json",
+          "./e2e/tsconfig.e2e.json"
+        ],
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "modules": true
+        }
+      },
+      "plugins": [
+        "@typescript-eslint",
+        "@angular-eslint/eslint-plugin"
+      ],
+      "rules": {
+        "@typescript-eslint/indent": [
+          "error", 2, {
+            "SwitchCase": 1,
+            "CallExpression": {"arguments": "first"},
+            "FunctionExpression": {"parameters": "first"},
+            "FunctionDeclaration": {"parameters": "first"}
+          }
+        ],
+        "@typescript-eslint/no-empty-function": 0,
+        "@typescript-eslint/no-explicit-any": 0,
+        "@typescript-eslint/no-var-requires": 0,
+        "@typescript-eslint/no-unsafe-call": 0,
+        "@typescript-eslint/no-unsafe-member-access": 0,
+        "@typescript-eslint/no-unsafe-assignment": 0,
+        "@typescript-eslint/no-unsafe-return": 0,
+        "@typescript-eslint/no-floating-promises": 0,
+        "@typescript-eslint/semi": "error",
+        "@angular-eslint/use-injectable-provided-in": "error",
+        "@angular-eslint/no-attribute-decorator": "error"
+      }
+    },
+    {
+      "files": ["*.component.html"],
+      "parser": "@angular-eslint/template-parser",
+      "plugins": ["@angular-eslint/template"],
+      "rules": {
+          "@angular-eslint/template/banana-in-box": "error",
+          "@angular-eslint/template/no-negated-async": "error"
+      }
+    }
+  ]
+}

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: maximegris
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: maximegris # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 15
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

.gitignore

@@ -8,6 +8,7 @@
 /release
 main.js
 src/**/*.js
+!src/karma.conf.js
 *.js.map
 
 # dependencies
@@ -24,7 +25,7 @@ src/**/*.js
 
 # IDE - VSCode
 .vscode/*
-!.vscode/settings.json
+.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json

.npmrc

@@ -0,0 +1,2 @@
+save=true
+save-exact=true

.travis.yml

@@ -1,17 +1,19 @@
+os:
+  - linux
+  - osx
+  - windows
 language: node_js
 node_js:
-  - 8
+  - 'lts/*'
-sudo: required
+services:
-addons:
+  - xvfb
-    chrome: stable
 before_script:
   - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
 install:
   - npm set progress=false
   - npm install
 script:
   - ng lint
-  - npm run test
+  - if [ "$TRAVIS_OS_NAME" != "windows" ]; then npm run test ; fi
-  - npm run e2e
+  - if [ "$TRAVIS_OS_NAME" != "windows" ]; then npm run e2e ; fi
   - npm run build

.vscode/launch.json

@@ -0,0 +1,36 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Electron Main Renderer",
+            "type": "node",
+            "request": "launch",
+            "protocol": "inspector",
+            // Prelaunch task compiles main.ts for Electron & starts Angular dev server.
+            "preLaunchTask": "Build.All",
+            "cwd": "${workspaceFolder}",
+            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+            "runtimeArgs": [
+                "--serve",
+                ".",
+                "--remote-debugging-port=9222"
+            ],
+            "windows": {
+                "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
+            }
+        }, {
+            "name": "Karma Attach Chrome",
+            "type": "chrome",
+            "request": "attach",
+            "port": 9222,
+            "webRoot": "${workspaceFolder}/",
+            "sourceMaps": true,
+            "timeout": 30000,
+            "trace": true
+        }
+        
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,27 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+      {
+        "label": "Build.All",
+        "type": "shell",
+        "command": "npm run electron:serve-tsc && ng serve",
+        "isBackground": true,
+        "group": {
+          "kind": "build",
+          "isDefault": true
+        },
+        "problemMatcher": {
+          "owner": "typescript",
+          "source": "ts",
+          "applyTo": "closedDocuments",
+          "fileLocation": ["relative", "${cwd}"],
+          "pattern": "$tsc",
+          "background": {
+            "activeOnStart": true,
+            "beginsPattern": "^.*",
+            "endsPattern": "^.*Compiled successfully.*"
+          }
+        }
+      }
+    ]
+  }

CHANGELOG.md

@@ -1,5 +1,260 @@
+## <small>9.0.2 (2020-11-15)</small>
+
+* Fix typo in eslint rule ([b8429b8](https://github.com/maximegris/angular-electron/commit/b8429b8))
+* misc/ remove old code ([9933622](https://github.com/maximegris/angular-electron/commit/9933622))
+
+
+
+## <small>9.0.1 (2020-11-14)</small>
+
+* [Bumped Version] 9.0.1 ([066dcdb](https://github.com/maximegris/angular-electron/commit/066dcdb))
+* ref/ support remote module in unit test ([04d9e8a](https://github.com/maximegris/angular-electron/commit/04d9e8a))
+
+
+
+## 9.0.0 (2020-11-14)
+
+* [Bumped Version] 9.0.0 ([a7964be](https://github.com/maximegris/angular-electron/commit/a7964be))
+* misc/ upgrade to Angular 11 ([d265dfa](https://github.com/maximegris/angular-electron/commit/d265dfa))
+
+
+
+## <small>8.0.6 (2020-11-14)</small>
+
+* [Bumped Version] 8.0.6 ([e0fb539](https://github.com/maximegris/angular-electron/commit/e0fb539))
+* fix/ zonejs version ([0b9b8b3](https://github.com/maximegris/angular-electron/commit/0b9b8b3))
+
+
+
+## <small>8.0.5 (2020-09-28)</small>
+
+* [Bumped Version] 8.0.5 ([2374427](https://github.com/maximegris/angular-electron/commit/2374427))
+* misc/ ci - remove fast finish option ([d4ce11d](https://github.com/maximegris/angular-electron/commit/d4ce11d))
+* misc/ enable remote module in renderer process (needed for spectron) ([3309855](https://github.com/maximegris/angular-electron/commit/3309855))
+* misc/ revert electron because spectron cannot handle: electron-userland/spectron#693 ([b1affd0](https://github.com/maximegris/angular-electron/commit/b1affd0)), closes [electron-userland/spectron#693](https://github.com/electron-userland/spectron/issues/693)
+* misc/ upgrade to Electron 10 & Angular 10.1 ([07786a2](https://github.com/maximegris/angular-electron/commit/07786a2))
+
+
+
+## <small>8.0.4 (2020-08-30)</small>
+
+* [Bumped Version] 8.0.4 ([ac3682d](https://github.com/maximegris/angular-electron/commit/ac3682d))
+* fix/ ng lint config ([753f828](https://github.com/maximegris/angular-electron/commit/753f828))
+* fix/ README typo (e2e chapter) ([85aaf86](https://github.com/maximegris/angular-electron/commit/85aaf86))
+* fix/ travis ci conf ([2632a2d](https://github.com/maximegris/angular-electron/commit/2632a2d))
+* misc/ clarify node lib import ([f41ce65](https://github.com/maximegris/angular-electron/commit/f41ce65))
+* misc/ upgrade Electron 10 ([b71c514](https://github.com/maximegris/angular-electron/commit/b71c514))
+* ref/ clean custom webpack target ('electron-renderer' or 'web') ([e3a4e01](https://github.com/maximegris/angular-electron/commit/e3a4e01))
+* Update README.md ([5cf5e2b](https://github.com/maximegris/angular-electron/commit/5cf5e2b))
+* Update README.md ([0b70270](https://github.com/maximegris/angular-electron/commit/0b70270))
+
+
+
+## <small>8.0.3 (2020-08-12)</small>
+
+* [Bumped Version] 8.0.2 ([84598a5](https://github.com/maximegris/angular-electron/commit/84598a5))
+* [Bumped Version] 8.0.3 ([00ce410](https://github.com/maximegris/angular-electron/commit/00ce410))
+* fix/ e2e tests with Spectron ([472afc8](https://github.com/maximegris/angular-electron/commit/472afc8))
+* fix/ require error with nodeIntegration = false ([61c5c6b](https://github.com/maximegris/angular-electron/commit/61c5c6b))
+* misc/ Upgrade Angular (10.0.9) and Electron (9.2.0) ([e3d2fca](https://github.com/maximegris/angular-electron/commit/e3d2fca))
+
+
+
+## <small>8.0.1 (2020-08-12)</small>
+
+* [Bumped Version] 8.0.1 ([e032729](https://github.com/maximegris/angular-electron/commit/e032729))
+* fix/ eslint on main.ts file ([4b17ab6](https://github.com/maximegris/angular-electron/commit/4b17ab6))
+* misc/ remove warinng npm start ( tsconfg.app include key) ([8a73b4a](https://github.com/maximegris/angular-electron/commit/8a73b4a))
+* misc/ upgrade Angular ([a1ef40d](https://github.com/maximegris/angular-electron/commit/a1ef40d))
+
+
+
+## 8.0.0 (2020-07-13)
+
+* [Bumped Version] 8.0.0 ([78a4c9e](https://github.com/maximegris/angular-electron/commit/78a4c9e))
+* added "style" key to "schematics" ([6f5bbc5](https://github.com/maximegris/angular-electron/commit/6f5bbc5))
+* Create FUNDING.yml ([087570a](https://github.com/maximegris/angular-electron/commit/087570a))
+* misc/ update README (Angular & Electron version) ([2d33b15](https://github.com/maximegris/angular-electron/commit/2d33b15))
+* ref/ Upgrade to Angular 10.3 & Electron 9.1 ([84f0519](https://github.com/maximegris/angular-electron/commit/84f0519))
+* Update README.md ([11d0a17](https://github.com/maximegris/angular-electron/commit/11d0a17))
+
+
+
+## <small>7.2.1 (2020-06-20)</small>
+
+* [Bumped Version] 7.2.1 ([cabd11e](https://github.com/maximegris/angular-electron/commit/cabd11e))
+* ref/ keep only 1 eslint config ([e942747](https://github.com/maximegris/angular-electron/commit/e942747))
+
+
+
+## 7.2.0 (2020-06-20)
+
+* [Bumped Version] 7.2.0 ([a98a84a](https://github.com/maximegris/angular-electron/commit/a98a84a))
+* feat/ merge electron-builder npm scripts ([ddd92b3](https://github.com/maximegris/angular-electron/commit/ddd92b3))
+* fix/ ng lint with eslint ([92d7419](https://github.com/maximegris/angular-electron/commit/92d7419))
+* misc/ upgrade Electron (9.0.4) / Angular (9.1.11) ([21f7401](https://github.com/maximegris/angular-electron/commit/21f7401))
+* ref/ electron remote deprecated ([a8628fc](https://github.com/maximegris/angular-electron/commit/a8628fc))
+
+
+
+## 7.1.0 (2020-05-02)
+
+* [Bumped Version] 7.1.0 ([8dffcea](https://github.com/maximegris/angular-electron/commit/8dffcea))
+* feat/ VSCode : add Debugging config for man process (#465) + Karma ([acc62d9](https://github.com/maximegris/angular-electron/commit/acc62d9)), closes [#465](https://github.com/maximegris/angular-electron/issues/465)
+* fix/ Karma configuration to debug easily  ([273e752](https://github.com/maximegris/angular-electron/commit/273e752))
+
+
+
+## <small>7.0.5 (2020-04-26)</small>
+
+* [Bumped Version] 7.0.5 ([63eed52](https://github.com/maximegris/angular-electron/commit/63eed52))
+* Upgrade Angular 9.1.3 & Electron 8.2.3 ([00b9d43](https://github.com/maximegris/angular-electron/commit/00b9d43))
+
+
+
+## <small>7.0.4 (2020-04-20)</small>
+
+* [Bumped Version] 7.0.4 ([dbce7a0](https://github.com/maximegris/angular-electron/commit/dbce7a0))
+* ref/ make app reloading/working with and without usehash routing strategy ([386ce67](https://github.com/maximegris/angular-electron/commit/386ce67))
+* Transparent background issue fix for Linux ([4c0c169](https://github.com/maximegris/angular-electron/commit/4c0c169))
+
+
+
+## <small>7.0.3 (2020-04-11)</small>
+
+* [Bumped Version] 7.0.2 ([c4c36f6](https://github.com/maximegris/angular-electron/commit/c4c36f6))
+* [Bumped Version] 7.0.3 ([6206066](https://github.com/maximegris/angular-electron/commit/6206066))
+* Fix a typo in README.md ([86ac910](https://github.com/maximegris/angular-electron/commit/86ac910))
+* fix/ polyfills in tsconfig ([cf4f172](https://github.com/maximegris/angular-electron/commit/cf4f172))
+* misc/ changelog ([19f6027](https://github.com/maximegris/angular-electron/commit/19f6027))
+* misc/ Changelog ([67437ba](https://github.com/maximegris/angular-electron/commit/67437ba))
+* misc/ maj angular 9.1.1 & electron 8.2.1 ([061e01e](https://github.com/maximegris/angular-electron/commit/061e01e))
+* misc/ maj eslint dep ([09fc1f7](https://github.com/maximegris/angular-electron/commit/09fc1f7))
+* moved all app icons to assets/icons folder ([7d6bb69](https://github.com/maximegris/angular-electron/commit/7d6bb69))
+* ref/ set allowRendererProcessReuse to true ([7c5c43b](https://github.com/maximegris/angular-electron/commit/7c5c43b))
+
+
+
+## <small>7.0.1 (2020-02-22)</small>
+
+* [Bumped Version] 7.0.1 ([7a84ca0](https://github.com/maximegris/angular-electron/commit/7a84ca0))
+* fix/ README dependencies version ([7276d96](https://github.com/maximegris/angular-electron/commit/7276d96))
+* misc/ upgrade Angular 9.0.2 & Electron 8.0.1 ([174b36f](https://github.com/maximegris/angular-electron/commit/174b36f))
+* ref/ travis test node 10 & 12 ([8b7ee5b](https://github.com/maximegris/angular-electron/commit/8b7ee5b))
+
+
+
+## 7.0.0 (2020-02-09)
+
+* [Bumped Version] 7.0.0 ([0f304d2](https://github.com/maximegris/angular-electron/commit/0f304d2))
+* cast isElectron to boolean #429 ([ee06695](https://github.com/maximegris/angular-electron/commit/ee06695)), closes [#429](https://github.com/maximegris/angular-electron/issues/429)
+* feat/ update angular 8 deps ([7df49ff](https://github.com/maximegris/angular-electron/commit/7df49ff))
+* feat/ update to Angular 9 & Electron 8 ([a304034](https://github.com/maximegris/angular-electron/commit/a304034))
+* fix/ e2e tests ([395d2da](https://github.com/maximegris/angular-electron/commit/395d2da))
+* hot reload note ([28e1854](https://github.com/maximegris/angular-electron/commit/28e1854))
+* ref/ upgrade electron to v8 ([320ce2f](https://github.com/maximegris/angular-electron/commit/320ce2f))
+
+
+
+## <small>6.4.1 (2019-12-25)</small>
+
+* feat/ update Electron (7.1.2) ([3d76ff5](https://github.com/maximegris/angular-electron/commit/3d76ff5))
+* misc/ maj changelog ([eb46727](https://github.com/maximegris/angular-electron/commit/eb46727))
+* reef/ update stale bot ([671b7c9](https://github.com/maximegris/angular-electron/commit/671b7c9))
+* ref/ remove usunsed files ([9bf5824](https://github.com/maximegris/angular-electron/commit/9bf5824))
+
+
+
+## 6.4.0 (2019-11-19)
+
+* [Bumped Version] 6.4.0 ([fac9eef](https://github.com/maximegris/angular-electron/commit/fac9eef))
+* #412 change selector of WebviewDirective ([76e7918](https://github.com/maximegris/angular-electron/commit/76e7918)), closes [#412](https://github.com/maximegris/angular-electron/issues/412)
+* eslint-migration ([7637f45](https://github.com/maximegris/angular-electron/commit/7637f45))
+* eslint-migration - disable warnings/errors ([99e7ec0](https://github.com/maximegris/angular-electron/commit/99e7ec0))
+* eslint-migration - fix removed translation import ([2f64f37](https://github.com/maximegris/angular-electron/commit/2f64f37))
+* eslint-migration - remove tslint.json configuration ([3c1f9f6](https://github.com/maximegris/angular-electron/commit/3c1f9f6))
+* karma-electron ([21f97fd](https://github.com/maximegris/angular-electron/commit/21f97fd))
+* karma-electron - remove chrome deps for travis ([0f09907](https://github.com/maximegris/angular-electron/commit/0f09907))
+* misc/ add npmrc ([9d94f9c](https://github.com/maximegris/angular-electron/commit/9d94f9c))
+* misc/ typo README ([d52b03a](https://github.com/maximegris/angular-electron/commit/d52b03a))
+* permissive eslint rules to remove linter warnings ([964b57f](https://github.com/maximegris/angular-electron/commit/964b57f))
+* require is not defined ([632c454](https://github.com/maximegris/angular-electron/commit/632c454))
+
+
+
+## <small>6.3.1 (2019-11-01)</small>
+
+* [Bumped Version]  6.3.1 ([671b6a3](https://github.com/maximegris/angular-electron/commit/671b6a3))
+* #395 - require is not defined ([c4b2cb6](https://github.com/maximegris/angular-electron/commit/c4b2cb6)), closes [#395](https://github.com/maximegris/angular-electron/issues/395)
+* changelog ([39b0bca](https://github.com/maximegris/angular-electron/commit/39b0bca))
+
+
+
+## 6.3.0 (2019-10-25)
+
+* [Bumped Version] 6.3.0 ([09f9646](https://github.com/maximegris/angular-electron/commit/09f9646))
+* misc/ change Electron version to 7.0.0 in README ([6a4e2de](https://github.com/maximegris/angular-electron/commit/6a4e2de))
+* misc/ remove link to dependenciesci ([93d5a8c](https://github.com/maximegris/angular-electron/commit/93d5a8c))
+* misc/ upgrade Electron 7 ([d732340](https://github.com/maximegris/angular-electron/commit/d732340))
+
+
+
+## 6.2.0 (2019-09-29)
+
+* [Bumped Version] 6.2.0 ([8838e0e](https://github.com/maximegris/angular-electron/commit/8838e0e))
+* Maj Changelog ([bc4c950](https://github.com/maximegris/angular-electron/commit/bc4c950))
+* misc/ add Stale to close unactive issues ([398bdf1](https://github.com/maximegris/angular-electron/commit/398bdf1))
+* Upgrade Angular 8.2.8 & Electron 6.0.10 ([2ecda63](https://github.com/maximegris/angular-electron/commit/2ecda63))
+
+
+
+## 6.1.0 (2019-08-15)
+
+* [Bumped Version] 6.1.0 ([b47c594](https://github.com/maximegris/angular-electron/commit/b47c594))
+* [DELETE]: vscode settings removed ([becc9b4](https://github.com/maximegris/angular-electron/commit/becc9b4))
+* [UPDATE]: Typescript version fixes ([a284c23](https://github.com/maximegris/angular-electron/commit/a284c23))
+* Angular src restructured as modular as per angular official guidelines, .travis.yml support added fo ([5983703](https://github.com/maximegris/angular-electron/commit/5983703))
+* bump tslint & codelyzer versions, update tslint rules & alphabetize ([8425cdc](https://github.com/maximegris/angular-electron/commit/8425cdc))
+* Corejs path updates ([88056d6](https://github.com/maximegris/angular-electron/commit/88056d6))
+* Electron 6.0.0 ([1aef350](https://github.com/maximegris/angular-electron/commit/1aef350))
+* fix/ Version Electron in README ([acf0d4f](https://github.com/maximegris/angular-electron/commit/acf0d4f))
+* misc/ upgrade Angular 8.2 / Spectron 7 ([6e2211f](https://github.com/maximegris/angular-electron/commit/6e2211f))
+* Update dependencies ([bd51f28](https://github.com/maximegris/angular-electron/commit/bd51f28))
+
+
+
+## <small>6.0.1 (2019-05-31)</small>
+
+* [Bumped Version] 6.0.1 ([4f9cef3](https://github.com/maximegris/angular-electron/commit/4f9cef3))
+* Add CI for macOS. ([3ba02e3](https://github.com/maximegris/angular-electron/commit/3ba02e3))
+* ref/ strict version build-angular & zonejs ([5a24b56](https://github.com/maximegris/angular-electron/commit/5a24b56))
+* ref/ strict version codelyzer ([6ede0c8](https://github.com/maximegris/angular-electron/commit/6ede0c8))
+* Remove Node.js v12. ([ccbf6cd](https://github.com/maximegris/angular-electron/commit/ccbf6cd))
+* Run CI for Node.js version 10 ([2538965](https://github.com/maximegris/angular-electron/commit/2538965))
+* Use service xvfb. ([4db31e3](https://github.com/maximegris/angular-electron/commit/4db31e3))
+
+
+
+## 6.0.0 (2019-05-31)
+
+* [Bumped Version] 6.0.0 ([fb719ab](https://github.com/maximegris/angular-electron/commit/fb719ab))
+* bump angular version ([7a564a0](https://github.com/maximegris/angular-electron/commit/7a564a0))
+* Fix Travis CI link ([10aaa4c](https://github.com/maximegris/angular-electron/commit/10aaa4c))
+* Not gitignore src/karma.conf.js ([7599320](https://github.com/maximegris/angular-electron/commit/7599320))
+* ref/ upgrade Angular 8 and Electron 5 ([92334cf](https://github.com/maximegris/angular-electron/commit/92334cf))
+* update versions and prepare for electron 5 ([07a5786](https://github.com/maximegris/angular-electron/commit/07a5786))
+* version bump ([bb1d6bb](https://github.com/maximegris/angular-electron/commit/bb1d6bb))
+* feat(CI): update Ubuntu and Node versions in Travis ([e0ff557](https://github.com/maximegris/angular-electron/commit/e0ff557))
+* fix: type conflicts ([a2971bf](https://github.com/maximegris/angular-electron/commit/a2971bf))
+* fix(e2e): add mocha types ([20e1e89](https://github.com/maximegris/angular-electron/commit/20e1e89))
+* fix(e2e): without devTools ([2581983](https://github.com/maximegris/angular-electron/commit/2581983)), closes [/github.com/electron/spectron/issues/174#issuecomment-319242097](https://github.com//github.com/electron/spectron/issues/174/issues/issuecomment-319242097)
+* chore: Spectron for e2e tests ([901438a](https://github.com/maximegris/angular-electron/commit/901438a))
+
+
+
 ## 5.1.0 (2018-11-30)
 
+* [Bumped Version] 5.1.0 ([b790e12](https://github.com/maximegris/angular-electron/commit/b790e12))
 * fix/ typo Angular 7 ([fde371f](https://github.com/maximegris/angular-electron/commit/fde371f))
 * fix/ typo README ([723233c](https://github.com/maximegris/angular-electron/commit/723233c))
 * fix/ typo script npm electron:windows ([45bab44](https://github.com/maximegris/angular-electron/commit/45bab44))
@@ -57,12 +312,18 @@
 * misc/ remove unused packages ([a7e33b6](https://github.com/maximegris/angular-electron/commit/a7e33b6))
 * misc/ update Changelog ([b758122](https://github.com/maximegris/angular-electron/commit/b758122))
 * ref/ upgrade angular to 6.0.3 ([e7fac6e](https://github.com/maximegris/angular-electron/commit/e7fac6e))
+* refactor: update electron, electron-builder to latest (2.0.2, 20.14.7) ([f19e6ee](https://github.com/maximegris/angular-electron/commit/f19e6ee))
+* refactor: upgrade to NodeJS 8, Angular 6, CLI 6, Electron 2.0, RxJS 6.1 ([e37efdb](https://github.com/maximegris/angular-electron/commit/e37efdb))
+* refactor(hooks): replace hooks to ng-cli fileReplacements logic ([c940037](https://github.com/maximegris/angular-electron/commit/c940037))
+* fix(test): create polyfills-test.ts for karma test & setup Travis CI ([7fbc68c](https://github.com/maximegris/angular-electron/commit/7fbc68c))
+* fix(travis): set progress to false (speed up npm) ([be48531](https://github.com/maximegris/angular-electron/commit/be48531))
 
 
 
 ## <small>3.4.1 (2018-05-25)</small>
 
 * misc/ update changelog ([70b359f](https://github.com/maximegris/angular-electron/commit/70b359f))
+* Modify electron builder configuration to remove source code and tests ([0cf6899](https://github.com/maximegris/angular-electron/commit/0cf6899))
 * version 3.4.1 ([308ea9c](https://github.com/maximegris/angular-electron/commit/308ea9c))
 
 
@@ -70,16 +331,10 @@
 ## 3.4.0 (2018-05-25)
 
 * misc/ update changelog ([7d5eeb3](https://github.com/maximegris/angular-electron/commit/7d5eeb3))
-* Modify electron builder configuration to remove source code and tests ([0cf6899](https://github.com/maximegris/angular-electron/commit/0cf6899))
 * ref/ remove contributors ([6dc97a1](https://github.com/maximegris/angular-electron/commit/6dc97a1))
 * The file is unused  ([05c9e39](https://github.com/maximegris/angular-electron/commit/05c9e39))
 * Translation issue ([35354b1](https://github.com/maximegris/angular-electron/commit/35354b1))
 * version 3.4.0 ([06d6b0f](https://github.com/maximegris/angular-electron/commit/06d6b0f))
-* refactor: update electron, electron-builder to latest (2.0.2, 20.14.7) ([f19e6ee](https://github.com/maximegris/angular-electron/commit/f19e6ee))
-* refactor: upgrade to NodeJS 8, Angular 6, CLI 6, Electron 2.0, RxJS 6.1 ([e37efdb](https://github.com/maximegris/angular-electron/commit/e37efdb))
-* refactor(hooks): replace hooks to ng-cli fileReplacements logic ([c940037](https://github.com/maximegris/angular-electron/commit/c940037))
-* fix(test): create polyfills-test.ts for karma test & setup Travis CI ([7fbc68c](https://github.com/maximegris/angular-electron/commit/7fbc68c))
-* fix(travis): set progress to false (speed up npm) ([be48531](https://github.com/maximegris/angular-electron/commit/be48531))
 
 
 
@@ -159,6 +414,7 @@
 
 ## 2.4.0 (2017-12-08)
 
+* Use HttpClientModule ([5704e2e](https://github.com/maximegris/angular-electron/commit/5704e2e))
 * version 2.4.0 ([0437b33](https://github.com/maximegris/angular-electron/commit/0437b33))
 
 
@@ -166,7 +422,6 @@
 ## 2.3.0 (2017-12-04)
 
 * add ngx translate ([facda37](https://github.com/maximegris/angular-electron/commit/facda37))
-* Use HttpClientModule ([5704e2e](https://github.com/maximegris/angular-electron/commit/5704e2e))
 
 
 
@@ -206,6 +461,7 @@
 
 * Add buffer to externals ([7e797f0](https://github.com/maximegris/angular-electron/commit/7e797f0))
 * Edit a typo on README ([956a2bc](https://github.com/maximegris/angular-electron/commit/956a2bc))
+* Fix #55 , and also added functionality for scripts global building ([012a894](https://github.com/maximegris/angular-electron/commit/012a894)), closes [#55](https://github.com/maximegris/angular-electron/issues/55)
 * Fix #55 removed bootstraps.css which for example purpose before. ([41445eb](https://github.com/maximegris/angular-electron/commit/41445eb)), closes [#55](https://github.com/maximegris/angular-electron/issues/55)
 * License MIT ([73494b7](https://github.com/maximegris/angular-electron/commit/73494b7))
 * Migrate to Angular 5 ([3a3ffe1](https://github.com/maximegris/angular-electron/commit/3a3ffe1))
@@ -221,7 +477,6 @@
 
 ## <small>1.8.1 (2017-09-22)</small>
 
-* Fix #55 , and also added functionality for scripts global building ([012a894](https://github.com/maximegris/angular-electron/commit/012a894)), closes [#55](https://github.com/maximegris/angular-electron/issues/55)
 * ref/ add package-lock in gitignore ([4edd98d](https://github.com/maximegris/angular-electron/commit/4edd98d))
 * remove package-lock ([8e98627](https://github.com/maximegris/angular-electron/commit/8e98627))
 * upgrade angular version 4.4.3 ([10d0f87](https://github.com/maximegris/angular-electron/commit/10d0f87))

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright 2018 - Maxime GRIS
+Copyright 2020 - Maxime GRIS
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,7 +1,7 @@
-[![Angular Logo](./logo-angular.jpg)](https://angular.io/) [![Electron Logo](./logo-electron.jpg)](https://electron.atom.io/)
+[![Angular Logo](https://www.vectorlogo.zone/logos/angular/angular-icon.svg)](https://angular.io/) [![Electron Logo](https://www.vectorlogo.zone/logos/electronjs/electronjs-icon.svg)](https://electronjs.org/)
 
+![Maintained][maintained-badge]
 [![Travis Build Status][build-badge]][build]
-[![Dependencies Status][dependencyci-badge]][dependencyci]
 [![Make a pull request][prs-badge]][prs]
 [![License](http://img.shields.io/badge/Licence-MIT-brightgreen.svg)](LICENSE.md)
 
@@ -11,13 +11,13 @@
 
 # Introduction
 
-Bootstrap and package your project with Angular 7 and Electron (Typescript + SASS + Hot Reload) for creating Desktop applications.
+Bootstrap and package your project with Angular 10 and Electron 9 (Typescript + SASS + Hot Reload) for creating Desktop applications.
 
 Currently runs with:
 
-- Angular v7.0.3
+- Angular v11.0.2
-- Electron v3.0.2
+- Electron v10.1.5
-- Electron Builder v20.28.1
+- Electron Builder v22.9.1
 
 With this sample, you can :
 
@@ -25,6 +25,10 @@ With this sample, you can :
 - Run your app in a production environment
 - Package your app into an executable file for Linux, Windows & Mac
 
+/!\ Hot reload only pertains to the renderer process. The main electron process is not able to be hot reloaded, only restarted.
+
+/!\ Angular 11.x CLI needs Node 10.13 or later to work correctly.
+
 ## Getting Started
 
 Clone this repository locally :
@@ -39,10 +43,10 @@ Install dependencies with npm :
 npm install
 ```
 
-There is an issue with `yarn` and `node_modules` that are only used in electron on the backend when the application is built by the packager. Please use `npm` as dependencies manager.
+There is an issue with `yarn` and `node_modules` when the application is built by the packager. Please use `npm` as dependencies manager.
 
 
-If you want to generate Angular components with Angular-cli , you **MUST** install `@angular/cli` in npm global context.  
+If you want to generate Angular components with Angular-cli , you **MUST** install `@angular/cli` in npm global context.
 Please follow [Angular-cli documentation](https://github.com/angular/angular-cli) if you had installed a previous version of `angular-cli`.
 
 ``` bash
@@ -51,49 +55,63 @@ npm install -g @angular/cli
 
 ## To build for development
 
-- **in a terminal window** -> npm start  
+- **in a terminal window** -> npm start
 
 Voila! You can use your Angular + Electron app in a local development environment with hot reload !
 
-The application code is managed by `main.ts`. In this sample, the app runs with a simple Angular App (http://localhost:4200) and an Electron window.  
+The application code is managed by `main.ts`. In this sample, the app runs with a simple Angular App (http://localhost:4200) and an Electron window.
-The Angular component contains an example of Electron and NodeJS native lib import.  
+The Angular component contains an example of Electron and NodeJS native lib import.
 You can disable "Developer Tools" by commenting `win.webContents.openDevTools();` in `main.ts`.
 
+## Use Electron / NodeJS / 3rd party libraries
+
+As see in previous chapter, this sample project runs on both mode (web and electron). To make this happens, **you have to import your dependencies the right way**. Please check `providers/electron.service.ts` to watch how conditional import of libraries has to be done when using electron / NodeJS / 3rd party librairies in renderer context (ie. Angular).
+
+## Browser mode
+
+Maybe you only want to execute the application in the browser with hot reload ? Just run `npm run ng:serve:web`.
+
 ## Included Commands
 
 |Command|Description|
 |--|--|
-|`npm run ng:serve:web`| Execute the app in the browser |
+|`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:linux`| Builds your application and creates an app consumable on linux system |
+|`npm run electron:build`| Builds your application and creates an app consumable based on your operating system |
-|`npm run electron:windows`| On a Windows OS, builds your application and creates an app consumable in windows 32/64 bit systems |
-|`npm run electron:mac`|  On a MAC OS, builds your application and generates a `.app` file of your application that can be run on Mac |
 
 **Your application is optimised. Only /dist folder and node dependencies are included in the executable.**
 
 ## You want to use a specific lib (like rxjs) in electron main thread ?
 
-You can do this! Just by importing your library in npm dependencies (not devDependencies) with `npm install --save`. It will be loaded by electron during build phase and added to the final package. Then use your library by importing it in `main.ts` file. Easy no ?
+YES! You can do it! Just by importing your library in npm dependencies section (not **devDependencies**) with `npm install --save`. It will be loaded by electron during build phase and added to your final package. Then use your library by importing it in `main.ts` file. Quite simple, isn't it ?
 
-## Browser mode
+## E2E Testing
 
-Maybe you want to execute the application in the browser with hot reload ? You can do it with `npm run ng:serve:web`.  
+E2E Test scripts can be found in `e2e` folder.
-Note that you can't use Electron or NodeJS native libraries in this case. Please check `providers/electron.service.ts` to watch how conditional import of electron/Native libraries is done.
+
+|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"`
 
 ## Branch & Packages version
 
 - Angular 4 & Electron 1 : Branch [angular4](https://github.com/maximegris/angular-electron/tree/angular4)
 - Angular 5 & Electron 1 : Branch [angular5](https://github.com/maximegris/angular-electron/tree/angular5)
 - Angular 6 & Electron 3 : Branch [angular6](https://github.com/maximegris/angular-electron/tree/angular6)
-- Angular 7 & Electron 3 : (master)
+- Angular 7 & Electron 3 : Branch [angular7](https://github.com/maximegris/angular-electron/tree/angular7)
+- Angular 8 & Electron 7 : Branch [angular8](https://github.com/maximegris/angular-electron/tree/angular8)
+- Angular 9 & Electron 7 : Branch [angular9](https://github.com/maximegris/angular-electron/tree/angular9)
+- Angular 10 & Electron 9 : Branch [angular10](https://github.com/maximegris/angular-electron/tree/angular9)
+- Angular 11 & Electron 10 : (master)
 
-[build-badge]: https://travis-ci.org/maximegris/angular-electron.svg?branch=master
+[build-badge]: https://travis-ci.org/maximegris/angular-electron.svg?branch=master&style=style=flat-square
-[build]: https://travis-ci.org/maximegris/angular-electron.svg?branch=master
+[build]: https://travis-ci.org/maximegris/angular-electron
-[dependencyci-badge]: https://dependencyci.com/github/maximegris/angular-electron/badge
+[license-badge]: https://img.shields.io/badge/license-Apache2-blue.svg?style=style=flat-square
-[dependencyci]: https://dependencyci.com/github/maximegris/angular-electron
-[license-badge]: https://img.shields.io/badge/license-Apache2-blue.svg?style=flat
 [license]: https://github.com/maximegris/angular-electron/blob/master/LICENSE.md
 [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
 [prs]: http://makeapullrequest.com
@@ -103,3 +121,4 @@ Note that you can't use Electron or NodeJS native libraries in this case. Please
 [github-star]: https://github.com/maximegris/angular-electron/stargazers
 [twitter]: https://twitter.com/intent/tweet?text=Check%20out%20angular-electron!%20https://github.com/maximegris/angular-electron%20%F0%9F%91%8D
 [twitter-badge]: https://img.shields.io/twitter/url/https/github.com/maximegris/angular-electron.svg?style=social
+[maintained-badge]: https://img.shields.io/badge/maintained-yes-brightgreen

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",
@@ -17,17 +17,15 @@
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
             "assets": [
-              "src/assets",
+              "src/assets"
-              "src/favicon.ico",
-              "src/favicon.png",
-              "src/favicon.icns",
-              "src/favicon.256x256.png",
-              "src/favicon.512x512.png"
             ],
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "customWebpackConfig": {
+              "path": "./angular.webpack.js"
+            }
           },
           "configurations": {
             "dev": {
@@ -46,6 +44,23 @@
                 }
               ]
             },
+            "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",
@@ -65,7 +80,7 @@
           }
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "browserTarget": "angular-electron:build"
           },
@@ -73,6 +88,9 @@
             "dev": {
               "browserTarget": "angular-electron:build:dev"
             },
+            "web": {
+              "browserTarget": "angular-electron:build:web"
+            },
             "production": {
               "browserTarget": "angular-electron:build:production"
             }
@@ -85,7 +103,7 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular-builders/custom-webpack:karma",
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills-test.ts",
@@ -96,24 +114,20 @@
               "src/styles.scss"
             ],
             "assets": [
-              "src/assets",
+              "src/assets"
-              "src/favicon.ico",
+            ],
-              "src/favicon.png",
+            "customWebpackConfig": {
-              "src/favicon.icns",
+              "path": "./angular.webpack.js"
-              "src/favicon.256x256.png",
+            }
-              "src/favicon.512x512.png"
-            ]
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
+            "eslintConfig": ".eslintrc.json",
-              "src/tsconfig.app.json",
+            "lintFilePatterns": [
-              "src/tsconfig.spec.json"
+              "src/**.ts",
-            ],
+              "main.ts"
-            "exclude": [
-              "**/node_modules/**"
             ]
           }
         }
@@ -123,21 +137,12 @@
       "root": "e2e",
       "projectType": "application",
       "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "angular-electron:serve"
-          }
-        },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
+            "eslintConfig": ".eslintrc.json",
-              "e2e/tsconfig.e2e.json"
+            "lintFilePatterns": [
-            ],
+              "e2e/**.ts"
-            "exclude": [
-              "**/node_modules/**"
             ]
           }
         }
@@ -148,7 +153,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",
-      "styleext": "scss"
+      "style": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "app"

angular.webpack.js

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

e2e/app.e2e-spec.ts

@@ -1,15 +0,0 @@
-import { AngularElectronPage } from './app.po';
-import { browser, element, by } from 'protractor';
-
-describe('angular-electron App', () => {
-  let page: AngularElectronPage;
-
-  beforeEach(() => {
-    page = new AngularElectronPage();
-  });
-
-  it('should display message saying App works !', () => {
-    page.navigateTo('/');
-    expect(element(by.css('app-home h1')).getText()).toMatch('App works !');
-  });
-});

e2e/app.po.ts

@@ -1,8 +0,0 @@
-import { browser, element, by } from 'protractor';
-
-/* tslint:disable */
-export class AngularElectronPage {
-  navigateTo(route: string) {
-    return browser.get(route);
-  }
-}

e2e/common-setup.ts

@@ -0,0 +1,38 @@
+const Application = require('spectron').Application;
+const electronPath = require('electron'); // Require Electron from the binaries included in node_modules.
+const path = require('path');
+
+export default function setup(): void {
+  beforeEach(async function () {
+    this.app = new Application({
+      // Your electron path can be any binary
+      // i.e for OSX an example path could be '/Applications/MyApp.app/Contents/MacOS/MyApp'
+      // But for the sake of the example we fetch it from our node_modules.
+      path: electronPath,
+
+      // Assuming you have the following directory structure
+
+      //  |__ my project
+      //     |__ ...
+      //     |__ main.js
+      //     |__ package.json
+      //     |__ index.html
+      //     |__ ...
+      //     |__ test
+      //        |__ spec.js  <- You are here! ~ Well you should be.
+
+      // The following line tells spectron to look and use the main.js file
+      // and the package.json located 1 level above.
+      args: [path.join(__dirname, '..')],
+      webdriverOptions: {}
+    });
+
+    await this.app.start();
+  });
+
+  afterEach(async function () {
+    if (this.app && this.app.isRunning()) {
+      await this.app.stop();
+    }
+  });
+}

e2e/main.e2e.ts

@@ -0,0 +1,27 @@
+import { expect } from 'chai';
+import { SpectronClient } from 'spectron';
+
+import commonSetup from './common-setup';
+
+describe('angular-electron App', function () {
+
+  commonSetup.apply(this);
+
+  let client: SpectronClient;
+
+  beforeEach(function() {
+    client = this.app.client;
+  });
+
+  it('creates initial windows', async function () {
+    const count = await client.getWindowCount();
+    expect(count).to.equal(1);
+  });
+
+  it('should display message saying App works !', async function () {
+    const elem = await client.$('app-home h1');
+    const text = await elem.getText();
+    expect(text).to.equal('App works !');
+  });
+
+});

e2e/protractor.conf.js

@@ -1,37 +0,0 @@
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-exports.config = {
-  allScriptsTimeout: 25000,
-  delayBrowserTimeInSeconds: 0,
-  specs: [
-    './**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    'browserName': 'chrome',
-    chromeOptions: {
-      args: ["--no-sandbox",  "--headless", "--disable-gpu"]
-    }
-  },
-  chromeOnly: true,
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine2',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function () { },
-    realtimeFailure: true
-  },
-  useAllAngular2AppRoots: true,
-  beforeLaunch: function () {
-    require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
-    });
-  },
-  onPrepare() {
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
-};

e2e/tsconfig.e2e.json

@@ -3,10 +3,12 @@
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es5",
+    "types": [
-    "types":[
+      "mocha",
-      "jasmine",
       "node"
     ]
-  }
+  },
+  "include": [
+    "**.ts"
+  ]
 }

electron-builder.json

@@ -20,19 +20,19 @@
         "!tslint.json"
     ],
   "win": {
-    "icon": "dist",
+    "icon": "dist/assets/icons",
     "target": [
       "portable"
     ]
   },
   "mac": {
-    "icon": "dist",
+    "icon": "dist/assets/icons",
     "target": [
       "dmg"
     ]
   },
   "linux": {
-    "icon": "dist",
+    "icon": "dist/assets/icons",
     "target": [
       "AppImage"
     ]

main.ts

@@ -2,11 +2,11 @@ import { app, BrowserWindow, screen } from 'electron';
 import * as path from 'path';
 import * as url from 'url';
 
-let win, serve;
+let win: BrowserWindow = null;
-const args = process.argv.slice(1);
+const args = process.argv.slice(1),
-serve = args.some(val => val === '--serve');
+  serve = args.some(val => val === '--serve');
 
-function createWindow() {
+function createWindow(): BrowserWindow {
 
   const electronScreen = screen;
   const size = electronScreen.getPrimaryDisplay().workAreaSize;
@@ -16,14 +16,24 @@ function createWindow() {
     x: 0,
     y: 0,
     width: size.width,
-    height: size.height
+    height: size.height,
+    webPreferences: {
+      nodeIntegration: true,
+      allowRunningInsecureContent: (serve) ? true : false,
+      contextIsolation: false,  // false if you want to run 2e2 test with Spectron
+      enableRemoteModule : true // true if you want to run 2e2 test  with Spectron or use remote module in renderer context (ie. Angular)
+    },
   });
 
   if (serve) {
+
+    win.webContents.openDevTools();
+
     require('electron-reload')(__dirname, {
       electron: require(`${__dirname}/node_modules/electron`)
     });
     win.loadURL('http://localhost:4200');
+
   } else {
     win.loadURL(url.format({
       pathname: path.join(__dirname, 'dist/index.html'),
@@ -32,8 +42,6 @@ function createWindow() {
     }));
   }
 
-  win.webContents.openDevTools();
-
   // Emitted when the window is closed.
   win.on('closed', () => {
     // Dereference the window object, usually you would store window
@@ -42,14 +50,15 @@ function createWindow() {
     win = null;
   });
 
+  return win;
 }
 
 try {
-
   // This method will be called when Electron has finished
   // initialization and is ready to create browser windows.
   // Some APIs can only be used after this event occurs.
-  app.on('ready', createWindow);
+  // Added 400 ms to fix the black background issue while using transparent window. More detais at https://github.com/electron/electron/issues/15947
+  app.on('ready', () => setTimeout(createWindow, 400));
 
   // Quit when all windows are closed.
   app.on('window-all-closed', () => {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-electron",
-  "version": "5.1.0",
+  "version": "9.0.2",
-  "description": "Angular 7 with Electron (Typescript + SASS + Hot Reload)",
+  "description": "Angular 11 with Electron (Typescript + SASS + Hot Reload)",
   "homepage": "https://github.com/maximegris/angular-electron",
   "author": {
     "name": "Maxime GRIS",
@@ -9,77 +9,98 @@
   },
   "keywords": [
     "angular",
-    "angular 7",
+    "angular 11",
     "electron",
+    "nodejs",
     "typescript",
-    "sass"
+    "spectron",
+    "eslint",
+    "sass",
+    "windows",
+    "mac",
+    "linux"
   ],
   "main": "main.js",
   "private": true,
   "scripts": {
-    "postinstall": "npm run postinstall:electron && electron-builder install-app-deps",
+    "postinstall": "electron-builder install-app-deps",
-    "postinstall:web": "node postinstall-web",
-    "postinstall:electron": "node postinstall",
     "ng": "ng",
-    "start": "npm run postinstall:electron && npm-run-all -p ng:serve electron:serve",
+    "start": "npm-run-all -p electron:serve ng:serve",
-    "build": "npm run postinstall:electron && npm run electron:serve-tsc && ng build",
+    "build": "npm run electron:serve-tsc && ng build --base-href ./",
     "build:dev": "npm run build -- -c dev",
     "build:prod": "npm run build -- -c production",
-    "ng:serve": "ng serve",
+    "ng:serve": "ng serve -c web -o",
-    "ng:serve:web": "npm run postinstall:web && ng serve -o",
+    "electron:serve-tsc": "tsc -p tsconfig.serve.json",
-    "electron:serve-tsc": "tsc -p tsconfig-serve.json",
+    "electron:serve": "wait-on tcp:4200 && npm run electron:serve-tsc && npx electron . --serve",
-    "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve",
+    "electron:local": "npm run build:prod && npx electron .",
-    "electron:local": "npm run build:prod && electron .",
+    "electron:build": "npm run build:prod && electron-builder build",
-    "electron:linux": "npm run build:prod && electron-builder build --linux",
+    "test": "ng test --watch=false",
-    "electron:windows": "npm run build:prod && electron-builder build --windows",
+    "test:watch": "ng test",
-    "electron:mac": "npm run build:prod && electron-builder build --mac",
+    "e2e": "npm run build:prod && cross-env TS_NODE_PROJECT='e2e/tsconfig.e2e.json' mocha --timeout 300000 --require ts-node/register e2e/**/*.e2e.ts",
-    "test": "npm run postinstall:web && ng test",
+    "version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
-    "e2e": "npm run postinstall:web && ng e2e",
+    "lint": "ng lint"
-    "version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
   },
   "dependencies": {},
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.10.0",
+    "@angular-builders/custom-webpack": "10.0.1",
-    "@angular/cli": "7.0.6",
+    "@angular-devkit/build-angular": "0.1100.2",
-    "@angular/common": "7.1.1",
+    "@angular-eslint/builder": "0.8.0-beta.0",
-    "@angular/compiler": "7.1.1",
+    "@angular-eslint/eslint-plugin": "0.8.0-beta.0",
-    "@angular/compiler-cli": "7.1.1",
+    "@angular-eslint/eslint-plugin-template": "0.8.0-beta.0",
-    "@angular/core": "7.1.1",
+    "@angular-eslint/schematics": "0.8.0-beta.0",
-    "@angular/forms": "7.1.1",
+    "@angular-eslint/template-parser": "0.8.0-beta.0",
-    "@angular/http": "7.1.1",
+    "@angular/cli": "11.0.2",
-    "@angular/language-service": "7.1.1",
+    "@angular/common": "11.0.2",
-    "@angular/platform-browser": "7.1.1",
+    "@angular/compiler": "11.0.2",
-    "@angular/platform-browser-dynamic": "7.1.1",
+    "@angular/compiler-cli": "11.0.2",
-    "@angular/router": "7.1.1",
+    "@angular/core": "11.0.2",
-    "@ngx-translate/core": "11.0.1",
+    "@angular/forms": "11.0.2",
-    "@ngx-translate/http-loader": "4.0.0",
+    "@angular/language-service": "11.0.2",
-    "@types/jasmine": "2.8.7",
+    "@angular/platform-browser": "11.0.2",
-    "@types/jasminewd2": "2.0.3",
+    "@angular/platform-browser-dynamic": "11.0.2",
-    "@types/node": "8.9.4",
+    "@angular/router": "11.0.2",
-    "codelyzer": "4.5.0",
+    "@ngx-translate/core": "13.0.0",
-    "conventional-changelog-cli": "2.0.11",
+    "@ngx-translate/http-loader": "6.0.0",
-    "core-js": "2.5.7",
+    "@types/jasmine": "3.6.1",
-    "electron": "3.0.10",
+    "@types/jasminewd2": "2.0.8",
-    "electron-builder": "20.36.2",
+    "@types/mocha": "8.0.4",
-    "electron-reload": "1.3.0",
+    "@types/node": "12.12.6",
-    "jasmine-core": "3.3.0",
+    "@typescript-eslint/eslint-plugin": "4.7.0",
-    "jasmine-spec-reporter": "4.2.1",
+    "@typescript-eslint/eslint-plugin-tslint": "4.7.0",
-    "karma": "3.1.1",
+    "@typescript-eslint/parser": "4.7.0",
-    "karma-chrome-launcher": "2.2.0",
+    "chai": "4.2.0",
-    "karma-coverage-istanbul-reporter": "2.0.4",
+    "conventional-changelog-cli": "2.1.1",
-    "karma-jasmine": "2.0.1",
+    "core-js": "3.6.5",
-    "karma-jasmine-html-reporter": "1.4.0",
+    "cross-env": "7.0.2",
+    "electron": "10.1.5",
+    "electron-builder": "22.9.1",
+    "electron-reload": "1.5.0",
+    "eslint": "7.13.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jsdoc": "30.7.8",
+    "eslint-plugin-prefer-arrow": "1.2.2",
+    "jasmine-core": "3.6.0",
+    "jasmine-spec-reporter": "6.0.0",
+    "karma": "~5.1.0",
+    "karma-coverage-istanbul-reporter": "3.0.3",
+    "karma-electron": "6.3.1",
+    "karma-jasmine": "4.0.1",
+    "karma-jasmine-html-reporter": "1.5.4",
+    "mocha": "8.2.1",
     "npm-run-all": "4.1.5",
-    "protractor": "5.4.1",
+    "rxjs": "6.6.3",
-    "rxjs": "6.3.3",
+    "spectron": "12.0.0",
-    "ts-node": "7.0.1",
+    "ts-node": "9.0.0",
-    "tslint": "5.11.0",
+    "tslib": "2.0.3",
-    "typescript": "3.1.6",
+    "typescript": "4.0.5",
-    "wait-on": "3.2.0",
+    "wait-on": "5.0.1",
-    "webdriver-manager": "12.1.0",
+    "webdriver-manager": "12.1.7",
-    "zone.js": "0.8.26"
+    "zone.js": "0.10.3"
+  },
+  "engines": {
+    "node": ">=10.13.0"
   },
   "browserlist": [
-    "chrome 85"
+    "chrome 83"
   ]
 }

postcss.config.js

@@ -1 +0,0 @@
-module.exports = {};

postinstall-web.js

@@ -1,16 +0,0 @@
-// Allow angular using electron module (native node modules)
-const fs = require('fs');
-const f_angular = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';
-
-fs.readFile(f_angular, 'utf8', function (err, data) {
-  if (err) {
-    return console.log(err);
-  }
-  var result = data.replace(/target: "electron-renderer",/g, '');
-  var result = result.replace(/target: "web",/g, '');
-  var result = result.replace(/return \{/g, 'return {target: "web",');
-
-  fs.writeFile(f_angular, result, 'utf8', function (err) {
-    if (err) return console.log(err);
-  });
-});

postinstall.js

@@ -1,16 +0,0 @@
-// Allow angular using electron module (native node modules)
-const fs = require('fs');
-const f_angular = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';
-
-fs.readFile(f_angular, 'utf8', function (err, data) {
-  if (err) {
-    return console.log(err);
-  }
-  var result = data.replace(/target: "electron-renderer",/g, '');
-  var result = result.replace(/target: "web",/g, '');
-  var result = result.replace(/return \{/g, 'return {target: "electron-renderer",');
-
-  fs.writeFile(f_angular, result, 'utf8', function (err) {
-    if (err) return console.log(err);
-  });
-});

src/app/app-routing.module.ts

@@ -1,16 +1,28 @@
-import { HomeComponent } from './components/home/home.component';
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { PageNotFoundComponent } from './shared/components';
+
+import { HomeRoutingModule } from './home/home-routing.module';
+import { DetailRoutingModule } from './detail/detail-routing.module';
 
 const routes: Routes = [
-    {
+  {
-        path: '',
+    path: '',
-        component: HomeComponent
+    redirectTo: 'home',
-    }
+    pathMatch: 'full'
+  },
+  {
+    path: '**',
+    component: PageNotFoundComponent
+  }
 ];
 
 @NgModule({
-    imports: [RouterModule.forRoot(routes, {useHash: true})],
+  imports: [
-    exports: [RouterModule]
+    RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' }),
+    HomeRoutingModule,
+    DetailRoutingModule
+  ],
+  exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.scss

@@ -0,0 +1,3 @@
+:host {
+  
+}

src/app/app.component.spec.ts

@@ -1,33 +1,21 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 import { TranslateModule } from '@ngx-translate/core';
-import { ElectronService } from './providers/electron.service';
+import { ElectronService } from './core/services';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      declarations: [AppComponent],
-        AppComponent
+      providers: [ElectronService],
-      ],
+      imports: [RouterTestingModule, TranslateModule.forRoot()]
-      providers: [
-        ElectronService
-      ],
-      imports: [
-        RouterTestingModule,
-        TranslateModule.forRoot()
-      ]
     }).compileComponents();
   }));
 
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
 });
-
-class TranslateServiceStub {
-  setDefaultLang(lang: string): void {
-  }
-}

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ElectronService } from './providers/electron.service';
+import { ElectronService } from './core/services';
 import { TranslateService } from '@ngx-translate/core';
 import { AppConfig } from '../environments/environment';
 
@@ -9,18 +9,20 @@ import { AppConfig } from '../environments/environment';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  constructor(public electronService: ElectronService,
+  constructor(
-    private translate: TranslateService) {
+    private electronService: ElectronService,
-
+    private translate: TranslateService
-    translate.setDefaultLang('en');
+  ) {
+    this.translate.setDefaultLang('en');
     console.log('AppConfig', AppConfig);
 
-    if (electronService.isElectron()) {
+    if (electronService.isElectron) {
-      console.log('Mode electron');
+      console.log(process.env);
-      console.log('Electron ipcRenderer', electronService.ipcRenderer);
+      console.log('Run in electron');
-      console.log('NodeJS childProcess', electronService.childProcess);
+      console.log('Electron ipcRenderer', this.electronService.ipcRenderer);
+      console.log('NodeJS childProcess', this.electronService.childProcess);
     } else {
-      console.log('Mode web');
+      console.log('Run in browser');
     }
   }
 }

src/app/app.module.ts

@@ -1,10 +1,9 @@
-import 'reflect-metadata';
-import '../polyfills';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-
 import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { CoreModule } from './core/core.module';
+import { SharedModule } from './shared/shared.module';
 
 import { AppRoutingModule } from './app-routing.module';
 
@@ -12,38 +11,36 @@ import { AppRoutingModule } from './app-routing.module';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
-import { ElectronService } from './providers/electron.service';
+import { HomeModule } from './home/home.module';
-
+import { DetailModule } from './detail/detail.module';
-import { WebviewDirective } from './directives/webview.directive';
 
 import { AppComponent } from './app.component';
-import { HomeComponent } from './components/home/home.component';
 
 // AoT requires an exported function for factories
-export function HttpLoaderFactory(http: HttpClient) {
+export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 }
 
 @NgModule({
-  declarations: [
+  declarations: [AppComponent],
-    AppComponent,
-    HomeComponent,
-    WebviewDirective
-  ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpClientModule,
+    CoreModule,
+    SharedModule,
+    HomeModule,
+    DetailModule,
     AppRoutingModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
-        useFactory: (HttpLoaderFactory),
+        useFactory: HttpLoaderFactory,
         deps: [HttpClient]
       }
     })
   ],
-  providers: [ElectronService],
+  providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

src/app/components/home/home.component.scss

@@ -1,17 +0,0 @@
-.container {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  background: url(../../../assets/background.jpg) no-repeat center fixed;
-  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
-  background-size: cover; /* version standardisée */
-
-  .title {
-    color: white;
-    margin:0;
-    padding:50px 20px;
-  }
-
-}

src/app/core/core.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class CoreModule { }

src/app/core/services/electron/electron.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ElectronService } from './electron.service';
+
+describe('ElectronService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ElectronService = TestBed.get(ElectronService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/electron/electron.service.ts

@@ -6,29 +6,31 @@ import { ipcRenderer, webFrame, remote } from 'electron';
 import * as childProcess from 'child_process';
 import * as fs from 'fs';
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class ElectronService {
-
   ipcRenderer: typeof ipcRenderer;
   webFrame: typeof webFrame;
   remote: typeof remote;
   childProcess: typeof childProcess;
   fs: typeof fs;
 
+  get isElectron(): boolean {
+    return !!(window && window.process && window.process.type);
+  }
+
   constructor() {
     // Conditional imports
-    if (this.isElectron()) {
+    if (this.isElectron) {
       this.ipcRenderer = window.require('electron').ipcRenderer;
       this.webFrame = window.require('electron').webFrame;
-      this.remote = window.require('electron').remote;
+
+      // If you wan to use remote object, pleanse set enableRemoteModule to true in main.ts
+      // this.remote = window.require('electron').remote;
 
       this.childProcess = window.require('child_process');
       this.fs = window.require('fs');
     }
   }
-
-  isElectron = () => {
-    return window && window.process && window.process.type;
-  }
-
 }

src/app/core/services/index.ts

@@ -0,0 +1 @@
+export * from './electron/electron.service';

src/app/detail/detail-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Routes, RouterModule } from '@angular/router';
+import { DetailComponent } from './detail.component';
+
+const routes: Routes = [
+  {
+    path: 'detail',
+    component: DetailComponent
+  }
+];
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule, RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DetailRoutingModule {}

src/app/detail/detail.component.html

@@ -0,0 +1,7 @@
+<div class="container">
+  <h1 class="title">
+    {{ 'PAGES.DETAIL.TITLE' | translate }}
+  </h1>
+
+  <a routerLink="/">{{ 'PAGES.DETAIL.BACK_TO_HOME' | translate }}</a>
+</div>

src/app/detail/detail.component.scss

@@ -0,0 +1,3 @@
+:host {
+  
+}

src/app/detail/detail.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DetailComponent } from './detail.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('DetailComponent', () => {
+  let component: DetailComponent;
+  let fixture: ComponentFixture<DetailComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [DetailComponent],
+      imports: [TranslateModule.forRoot(), RouterTestingModule]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render title in a h1 tag', waitForAsync(() => {
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain(
+      'PAGES.DETAIL.TITLE'
+    );
+  }));
+});

src/app/detail/detail.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-detail',
+  templateUrl: './detail.component.html',
+  styleUrls: ['./detail.component.scss']
+})
+export class DetailComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void { }
+
+}

src/app/detail/detail.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DetailRoutingModule } from './detail-routing.module';
+
+import { DetailComponent } from './detail.component';
+import { SharedModule } from '../shared/shared.module';
+
+@NgModule({
+  declarations: [DetailComponent],
+  imports: [CommonModule, SharedModule, DetailRoutingModule]
+})
+export class DetailModule {}

src/app/home/home-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home.component';
+
+const routes: Routes = [
+  {
+    path: 'home',
+    component: HomeComponent
+  }
+];
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule, RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomeRoutingModule {}

src/app/home/home.component.html

@@ -2,4 +2,6 @@
   <h1 class="title">
     {{ 'PAGES.HOME.TITLE' | translate }}
   </h1>
+
+  <a routerLink="/detail">{{ 'PAGES.HOME.GO_TO_DETAIL' | translate }}</a>
 </div>

src/app/home/home.component.scss

@@ -0,0 +1,3 @@
+:host {
+  
+}

src/app/home/home.component.spec.ts

@@ -1,20 +1,18 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { HomeComponent } from './home.component';
 import { TranslateModule } from '@ngx-translate/core';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
   let fixture: ComponentFixture<HomeComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ HomeComponent ],
+      declarations: [HomeComponent],
-      imports: [
+      imports: [TranslateModule.forRoot(), RouterTestingModule]
-        TranslateModule.forRoot()
+    }).compileComponents();
-      ]
-    })
-    .compileComponents();
   }));
 
   beforeEach(() => {
@@ -27,8 +25,10 @@ describe('HomeComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should render title in a h1 tag', async(() => {
+  it('should render title in a h1 tag', waitForAsync(() => {
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('PAGES.HOME.TITLE');
+    expect(compiled.querySelector('h1').textContent).toContain(
+      'PAGES.HOME.TITLE'
+    );
   }));
 });

src/app/home/home.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-home',
@@ -7,9 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) { }
 
-  ngOnInit() {
+  ngOnInit(): void { }
-  }
 
 }

src/app/home/home.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { HomeRoutingModule } from './home-routing.module';
+
+import { HomeComponent } from './home.component';
+import { SharedModule } from '../shared/shared.module';
+
+@NgModule({
+  declarations: [HomeComponent],
+  imports: [CommonModule, SharedModule, HomeRoutingModule]
+})
+export class HomeModule {}

src/app/shared/components/index.ts

@@ -0,0 +1 @@
+export * from './page-not-found/page-not-found.component';

src/app/shared/components/page-not-found/page-not-found.component.html

@@ -0,0 +1,3 @@
+<p>
+  page-not-found works!
+</p>

src/app/shared/components/page-not-found/page-not-found.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent;
+  let fixture: ComponentFixture<PageNotFoundComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [PageNotFoundComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/page-not-found/page-not-found.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.scss']
+})
+export class PageNotFoundComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/app/shared/directives/index.ts

@@ -0,0 +1 @@
+export * from './webview/webview.directive';

src/app/shared/directives/webview/webview.directive.spec.ts

@@ -0,0 +1,8 @@
+import { WebviewDirective } from './webview.directive';
+
+describe('WebviewDirective', () => {
+  it('should create an instance', () => {
+    const directive = new WebviewDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/shared/directives/webview/webview.directive.ts

@@ -4,7 +4,5 @@ import { Directive } from '@angular/core';
   selector: 'webview'
 })
 export class WebviewDirective {
-
   constructor() { }
-
 }

src/app/shared/shared.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+import { PageNotFoundComponent } from './components/';
+import { WebviewDirective } from './directives/';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [PageNotFoundComponent, WebviewDirective],
+  imports: [CommonModule, TranslateModule, FormsModule],
+  exports: [TranslateModule, WebviewDirective, FormsModule]
+})
+export class SharedModule {}

src/assets/i18n/en.json

@@ -1,7 +1,12 @@
 {
   "PAGES": {
       "HOME": {
-          "TITLE": "App works !"
+          "TITLE": "App works !",
-      }
+          "GO_TO_DETAIL": "Go to Detail"
+      },
+      "DETAIL": {
+        "TITLE": "Detail page !",
+        "BACK_TO_HOME": "Back to Home"
+    }
   }
 }

src/environments/environment.dev.ts

@@ -1,8 +1,3 @@
-// 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'

src/environments/environment.web.ts

@@ -0,0 +1,4 @@
+export const AppConfig = {
+  production: false,
+  environment: 'WEB'
+};

src/index.html

@@ -2,11 +2,11 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>AngularElectron</title>
+  <title>Angular Electron</title>
-  <base href="">
+  <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico">
 </head>
 <body>
   <app-root>Loading...</app-root>

src/karma.conf.js

@@ -7,7 +7,7 @@ module.exports = function (config) {
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
-      require('karma-chrome-launcher'),
+      require('karma-electron'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
@@ -24,8 +24,22 @@ module.exports = function (config) {
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
-    autoWatch: true,
+    browsers: ['AngularElectron'],
-    browsers: ['Chrome'],
+    customLaunchers: {
-    singleRun: true
+      AngularElectron: {
+        base: 'Electron',
+        flags: [
+          '--remote-debugging-port=9222'
+        ],
+        browserWindowOptions: {
+          webPreferences: {
+            nodeIntegration: true,
+            nodeIntegrationInSubFrames: true,
+            allowRunningInsecureContent: true,
+            enableRemoteModule: true
+          }
+        }
+      }
+    }
   });
 };

src/polyfills-test.ts

@@ -1,3 +1,2 @@
-import 'core-js/es7/reflect';
+import 'core-js/es/reflect';
 import 'zone.js/dist/zone';
-

src/polyfills.ts

@@ -18,57 +18,40 @@
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/**
- * If the application will be indexed by Google Search, the following is required.
- * Googlebot uses a renderer based on Chrome 41.
- * https://developers.google.com/search/docs/guides/rendering
- **/
-// import 'core-js/es6/array';
-
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
+ */
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
  */
 
- // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
-
- /*
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
- */
-// (window as any).__Zone_enable_cross_context_check = true;
-
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */

src/styles.scss

@@ -4,4 +4,46 @@ html, body {
   padding: 0;
 
   height: 100%;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+/* CAN (MUST) BE REMOVED ! Sample Global style */
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  background: url(./assets/background.jpg) no-repeat center fixed;
+  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
+  background-size: cover; /* version standardisée */
+
+  .title {
+    color: white;
+    margin: 0;
+    padding: 50px 20px;
+  }
+
+  a {
+    color: #fff !important;
+    text-transform: uppercase;
+    text-decoration: none;
+    background: #ed3330;
+    padding: 20px;
+    border-radius: 5px;
+    display: inline-block;
+    border: none;
+    transition: all 0.4s ease 0s;
+
+    &:hover {
+      background: #fff;
+      color: #ed3330 !important;
+      letter-spacing: 1px;
+      -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
+      -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
+      box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
+      transition: all 0.4s ease 0s;
+    }
+  }
 }

src/tsconfig.app.json

@@ -6,7 +6,16 @@
     "baseUrl": "",
     "types": []
   },
+  "include": [
+    "main.ts",
+    "polyfill.ts"
+  ],
   "exclude": [
     "**/*.spec.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "preserveWhitespaces": true
+  }
 }

src/typings.d.ts

@@ -1,10 +1,8 @@
 /* SystemJS module definition */
-declare var nodeModule: NodeModule;
+declare const nodeModule: NodeModule;
 interface NodeModule {
   id: string;
 }
-
-declare var window: Window;
 interface Window {
   process: any;
   require: any;

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "module": "es2020",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
@@ -18,9 +19,12 @@
       "dom"
     ]
   },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
   "include": [
-    "main.ts",
+    "src/**/*.d.ts"
-    "src/**/*"
   ],
   "exclude": [
     "node_modules"

tsconfig.serve.json

@@ -6,8 +6,8 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "es5",
-    "typeRoots": [
+    "types": [
-      "node_modules/@types"
+      "node"
     ],
     "lib": [
       "es2017",
@@ -16,7 +16,7 @@
       "dom"
     ]
   },
-  "include": [
+  "files": [
     "main.ts"
   ],
   "exclude": [

tslint.json

@@ -1,136 +0,0 @@
-{
-  "rulesDirectory": [
-    "node_modules/codelyzer"
-  ],
-  "rules": {
-    "arrow-return-shorthand": true,
-    "callable-types": true,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space"
-    ],
-    "curly": true,
-    "deprecation": {
-      "severity": "warn"
-    },
-    "eofline": true,
-    "forin": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
-    "import-spacing": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-over-type-literal": true,
-    "label-position": true,
-    "max-line-length": [
-      true,
-      140
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
-        ]
-      }
-    ],
-    "no-arg": true,
-    "no-bitwise": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-super": true,
-    "no-empty": false,
-    "no-empty-interface": true,
-    "no-eval": true,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-misused-new": true,
-    "no-non-null-assertion": true,
-    "no-shadowed-variable": true,
-    "no-string-literal": false,
-    "no-string-throw": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unnecessary-initializer": true,
-    "no-unused-expression": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "prefer-const": true,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "radix": true,
-    "semicolon": [
-      true,
-      "always"
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "unified-signatures": true,
-    "variable-name": false,
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator",
-      "check-type"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ],
-    "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
-    "no-input-rename": true,
-    "no-output-rename": true,
-    "use-life-cycle-interface": true,
-    "use-pipe-transform-interface": true,
-    "component-class-suffix": true,
-    "directive-class-suffix": true
-  }
-}