Communicating between Angular and Electron
According to the specifications of the project, the content of the WYSIWYG editor needs to be persisted in the local filesystem. Additionally, the content will be loaded from the filesystem upon application startup.
The Angular application handles any interaction between the WYSIWYG editor and its data using the renderer process, whereas the Electron application manages the filesystem with the main process. Thus, we need to establish an IPC mechanism to communicate between the two Electron processes as follows:
- Configuring the Angular CLI workspace
- Interacting with the editor
- Interacting with the filesystem
Let’s start by setting up the Angular CLI project to support the desired communication mechanism.
Configuring the Angular CLI workspace
We need to modify several files to configure the workspace of our application:
- Open the
main.ts
file that exists in thesrc\electron
folder...