angular-electron | Electron Platform for Angular | Reactive Programming library

I have an Angular project run with Electron. My code compiles and works nicely, and now I've come to test it. Before I even start writing tests, all the 'shouldCreate' tests are failing with the message "TypeError: window.require is not a function".

I have seen this post and this post, as well as a few others on the matter, but none of them address what to do if it only fails in tests.

How can I get my tests to succeed, even with my code having things like window.require('fs') and the like? Again, the code compiles and runs (at least in the dev environment) but my tests fail before I have written them

TIA

EDIT: My code is based off of this github project

I searched a lot of posts and also the official Angular documentation, but I'm not able to get an AngularJS service running in Angular. I finally came to this page https://angular.io/api/upgrade/static/UpgradeModule#examples which seems to explain exactly what I need, but when doing all those steps I'm getting:

ERROR Error: Trying to get the AngularJS injector before it being set.

My impression is that this example is not quite complete. E.g. there is no hint were the (old) AngularJS framework must be loaded. My service looks like angular.module('my-module').service('my-service', ... thus angular needs to be defined, otherwise I'm getting an error. Furthermore many examples assume that the AngularJS code is written in TypeScript. In my case this is not true (just plain Javascript).

Unfortunately with Angular 9 there is an additional issue with the @angular/upgrade module which is not mentioned anywhere and can only be solved by disabling the new Ivy compiler in tsconfig.app.json, otherwise the compiler will throw Error: Error on worker #1: Error: getInternalNameOfClass() called on a non-ES5 class: expected UpgradeComponent to have an inner class declaration:

I'm creating a desktop version of an angular app, for that I'm using electron.

Opening main window is quite easy:

I am using Angular 8 for my Angular-Electron application. I have a field as API-Key stored in a tabular format which is quite sensitive and needs to be shown to user on user's account page. The problem is it needs to be shown as a password text-field. Whenever user will click on a button called "Show", the API-key would be visible for a few seconds perhaps or until user clicks the button again. It cannot be shown as an input field.

This is how the user account details are shown to user:

Compiling my Angular Electron app gives Error: ENOENT: no such file or directory, open 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/_models/webpack-configs/browser.js'. The app does compile and run. The problem emerged after running npm install.

My node-modules has ../angular-cli-files/models/.., containing browser.js. Weirdly, an underscore is prepended, ie _models, in the error message. I'm completely at a loss why this happens. I've tried the suggestions in several SO answers Could not find module "@angular-devkit/build-angular"; Cannot find module 'webpack' - Angular and others, but no luck. My search didn't find any examples with an underscore being prepended.

package.json:

I'm trying to set up my application with Electron for the first time. The initial steps of adding main.js, changing the index.html, changing the package.json are done. While I try to run the application using the command npm run electron-build, I get a screen as below.

Error-while-running-electron-app

I'm not able to run my application. It isn't an error basically, but just lack of information. Any help regarding this will be much appreciated. TIA.

main.js

Im creating a desktop app using angular-electron
I'm using electron-builder for packaging that supports auto updates with electron-updater

Everything is working by calling the functions from the entry point main.ts

I'm using angular-electron to build a windows desktop application with angular 7 and electron 4. Now I would like to externalise a specific folder(let's say config folder) at the root of the unpacked build. There are a lot of files inside config folder used in the application and which could be edited by the final user

Here is the unpacked structure I want:

How to manage this ?

In my angular-electron app I use mat-tab-group, in every tab i load the same instance of a component.

I have two ways to create new Tabs: - one by clicking a button in the component which holds the mat-tab-group - the second one is triggered via an IPC message.

Both ways call the same function, where I push a new object to an array, the tabs are created via *ngFor on this array.

The effect:

While the "second" tab created by the clicked button behaves normally, the one triggered via IPC ("third") does not:

The ripple effect is shown right on the click on the "third"-tab, but the click event on the tab (selectedTabChange) is only triggered when i click a second time somewhere in the window. Also, the content of the tab (wrapped in an ng-template) is changed only after the second click.

Both, the component which holds the tabs as well as the one which is instantiated in every tab, use push strategy in change detection.

I am pretty sure that this has something to do with ngZones, but I am not sure how I could solve this problem. Thanks for any help!

Animated Gif here:

switching Tabs

Code HTML: