The functionality of the Ionic 4 app differs from that of an Electron app

I've encountered an issue with my Ionic 4 capacitor app. While it functions properly on Android studio, I'm having trouble getting it to work on Electron. Any ideas on how to resolve this?

Here are the steps I took to convert it to Electron:

npx cap add electron

ionic build --prod

npx cap copy

npx cap open electron

However, when I launch it in Electron, all I see is a blank app without the expected home screen.

home.html

<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-grid>
<ion-row>
<ion-col>
<ion-button color="primary" (click)="createFile()">Create a file</ion-button>
</ion-col>
<ion-col>
<ion-button color="secondary" (click)="view()">View</ion-button>
</ion-col>
</ion-row>
</ion-grid>

https://i.sstatic.net/IhsO1.png

Answer №1

After implementing these changes, everything is functioning properly.

The main file is named index.html

<base href="./">

Additionally,

Configuration settings in tsconfig.json were updated from es2015 to es5.

"target": "es5",

Answer №2

This is the method that I've successfully implemented as well

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I prevent buttons from being created using ngFor in Angular?

I need help with creating an HTML table that includes a cell with a button and a dropdown generated using ngFor. How can I disable the buttons (generated via ngFor) if no value is selected from the dropdown? Here's what I have tried so far: In my App ...

Boost Page Speed with Angular

Currently, I am working on a project using Angular and encountered an issue with testing the page speed on GTmetrix. Despite generating the build with the command ng build --prod--aot, the file size is 1.9mb, leading to a low speed in GTmetrix's analy ...

Leveraging animations in Angular2 that are defined outside of a component

I've recently put together a basic component @Component({ selector: 'saved-overlay', templateUrl: './saved-overlay.html', exportAs: 'saved-overlay', animations: [ trigger('inOut', [ transition ...

Tips for receiving a reply from a post request

After successfully making and completing a post request, I'm wondering about using console.log(res.valor) in the code to display the data: consultarCorreio(){ this.cartS.cart.valorTotalItems this.cartS.getCorreiosPrazoPreco(this.cartS.cart.pesoTot ...

How to display a PDF in a new tab using Angular 4 and a Node API

I have a specific requirement to generate a PDF view of my Angular 4 app's UI using a Node.js API. To achieve this, I extracted the entire content from the UI and conducted some pre-processing before sending it to the Node.js API. Within the Node API, ...

What is the best way to interweave my objects within this tree using recursion?

I am working on creating a new function called customAdd() that will build a nested tree structure like the one shown below: let obj = [] let obj1 = { key: "detail1Tests", id: "94d3d1a2c3d8c4e1d77011a7162a23576e7d8a30d6beeabfadcee5df0876bb0e" } ...

Angular 4+ directive allowing interaction with the NgModel of a component

I'm looking to update styles based on the state of NgModel.control. To keep it DRY, I was thinking that a directive for reading the NgModel component state could be the solution. Is this actually feasible? I haven't been able to find any guidanc ...

Guide to showcasing an image obtained from a Web API in Angular

I have a unique challenge with displaying images on the user interface. The image data is retrieved from a database through a web API, and the image path is stored in the DB's imagePath column. However, when fetching the data via the web API, only the ...

Tips for adjusting card content to fit its size in material ui?

I'm looking to implement Material UI cards in a grid layout, each containing a Highcharts chart as shown in this demo. However, I'm facing an issue where the content does not adjust properly when the card size is fixed. How can I resolve this? A ...

Before proceeding to update in Angular 8, ensure the repository is not dirty. Commit or stash any changes that have been

Encountered an Issue The repository is not clean. Please commit or stash any changes before updating. When upgrading from version 7 to Angular 8, I faced this error. To find out more about the upgrade process, you can visit the Angular Guide for Upgra ...

Using Angular to convert JSON data to PDF format and send it to the printer

Currently, I am retrieving JSON data from an API and now need to convert this data into a PDF format for printing. I am encountering an issue where the CSS styling for page breaks is not rendering properly within my Angular component. When I test the same ...

Is the Cyrillic encoding feature not functioning properly in Angular 4 with .Net Core 2?

Struggling with handling Cyrillic characters in my current project. Utilizing .Net Core 2 along with Angular 4.2.5 I've noticed that displaying a string in the templates using {{ someCyrillicString }} works fine. However, encountering issues when tryi ...

Using Angular's asyncValidator in conjunction with BehaviorSubject allows for real

Currently, I am working on developing an Angular form. Below is a snippet of my code where I am attempting to construct a multi-group form with an async validator. The scenario involves validating whether a number exists in a specific list. In a real-worl ...

Does JSX/TSX markup act as a constant that is passed by value or by reference?

In a separate file called EmptyNode.tsx, I have defined a constant: export const EmptyNode = <></> This constant is used to return an empty node when there is no content to display. For example: ... render() { if(!this.props.data) { ...

Using Class as a Parameter

I recently started using TypeScript and encountered an implementation issue. I'm working on a class that takes another class as an argument. The challenge is that it can be any class, but I want to define certain possible class properties or methods. ...

Combining ngModel and ngClass in Angular: a comprehensive guide

I have implemented the following code in Angular 6 using Visual Studio Code <div [ngClass]="{'disabled': isReadOnly}"> <label class="switch"> <input type="checkbox" name="Gender" ...

Issue with TypeScript version 4.2.1 - The Array.some() method does not support a function that returns a boolean

I encountered a TypeScript error that goes as follows: https://i.sstatic.net/RoGER.png The complete error message reads: Supplied parameters do not match any signature of call target: parameter type mismatch. > Parameter 'Predicate' should ...

Angular, dividing a row between two components

Can components share the same row? Currently, the side navbar takes up 2 columns, but I want each card to take up exactly 3 columns. This is the current layout: https://i.sstatic.net/J0CRF.png Here is the expected layout: https://i.sstatic.net/GupPd.png ...

Application electron has been successfully installed, however, it does not seem to be displaying in the start menu

My app built with Electron has been packaged as an executable file (.exe) using electron-builder. Upon running the generated executable, the application displays the default installation GIF provided by electron-builder as expected. Once the GIF finishes ...

The conversion of an array to Ljava/lang/Object is not possible

I'm currently working on a project using NativeScript app with TypeScript where I am trying to pass an array of android.net.Uri to a function. However, when attempting to do so, I encounter an error mentioning that the 'create' property does ...