Common Challenges Faced While Converting an Angular Web Application into an Electron Desktop Application
Converting an angular web application can lead to a number of issues, here are a few challenges and possible workarounds:
- Importing Electron in individual components.
This is the most common issue faced by developers. Sometimes, for deeper integration and to make things easier, use of electron api(s) inside Angular is required. Importing electron packages in files other than main.js produces webpack issues. This is because webpack evaluates the “require” statement at compilation time.
Solution:
Using ngx-electron package: The package wraps all electron api(s) into a single ngx-electron-service.
OR
const electron = eval(‘require’)(“electron”) (GitHub issue workaround)
2. Ngx-Electron version.
Version compatibility is a major concern when installing new packages in the existing angular project.
For instance, in an Angular-5 project, Ngx electron module requires a newer version of typescript, which may lead to issues in the existing project. (Avoid updating typescript/previously installed package versions)
Solution:
Install an older version of electron.
(Angular 5 works with <= 6.0.0)
3. Web storage(cookies, localstorage etc) in Electron apps.
Web storage api(s) in the converted application do not work. This is because Electron uses file:// protocol.
By default, web storage apis (localStorage, sessionStorage, webSQL, indexedDB, cookies) are disabled for non standard schemes. If a custom protocol is to be used, it has to be registered as a standard protocol.
Creating cookies with custom http/https urls works, but cannot be set on the custom schemes which are not standard.
Solution:
Registering schemes as standard is one solution to make custom and file protocol work like the standard http or https protocol. A standard scheme has a set of URI syntax rules by RFC 3986. Http and https are used as standards, worldwide.
User custom protocols can be registered standard by using the protocol api in Electron, which allows the use of all web storage api(s) like Cookies, LocalStorage, Session Storage(IndexedDB and Web SQL).
Protocol api methods to register custom schemes as standard:
protocol.registerSchemesAsPrivileged/ protocol.registerStandardSchemes
4. Image handling/ asset management.
In the case of web applications, all static contents are served by HTTP (GET) method. Though they use relative paths, the HTTP server handles the path parsing work.
However, when running under Electron, the file:// protocol is used, instead of the http protocol. Static contents usually use relative paths like ./picture.jpg, the file protocol finds the file under root path like C://.//. So static contents like ./picture.jpg won’t be loaded correctly.
Solution: Paths have to be redefined.
Click here for a comparison among 3 approaches to convert a web app to a desktop app