Error during execution: Unhandled promise rejection - ReferenceError: cordova is not recognized

As I work on developing a small app that launches URLs, I encountered some initial errors such as "CANNOT FIND PLATFORM" and a runtime error regarding module not found. Fortunately, with guidance from the Stack Overflow community, I was able to resolve these issues.

Although the app successfully builds and is visible on real devices, it faces challenges when trying to launch the URL. Clicking the button in Ionic serve triggers a runtime error, preventing the button from functioning properly on actual devices as well.

Included below are excerpts from my .ts and .html files along with a screenshot of the error message:

Home.ts

 import {Component} from '@angular/core';
 import { Platform } from 'ionic-angular';

 declare var cordova:any;

 @Component({
 selector: 'page-home',
 templateUrl: 'home.html'
 })
 export class HomePage {
 constructor(public platform: Platform) {
 platform = platform;

 }

launch(url) {
this.platform.ready().then(() => {
cordova.InAppBrowser.open(url, "_system", "location=true");
});

}

}

Home.html

<ion-header>
<ion-navbar>
<ion-title>
    Home
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="home">
<p>
<button (click)= "launch('https://www.google.de')"> LAUNCH URL </button>
</p>  
</ion-content>

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

Answer №1

Confirmed the availability of InAppBrowser in the plugin directory. If not found, insert it using

ionic plugin add cordova-plugin-inappbrowser

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

The ng2-admin project is missing the `npm run build:prod:aot` script

When I use the command npm run build:prod to create the ng2-admin app image, everything works fine. However, when I deploy this image on Docker, it keeps throwing errors. In an attempt to troubleshoot, I decided to run: npm run build:prod:aot But runni ...

Encountering unexpected compilation errors in an Angular 9 project while utilizing safe null accessing and null coalescing features?

It's really strange what happened with this project. It was working perfectly fine yesterday, and I even left 'ng serve' running after finishing my work without any issues. However, today when I tried to compile the app, I ran into problems ...

What is the best way to duplicate an object in TypeScript?

After receiving the object credential.user, my goal is to create a modified clone of it and pass it to a function. const credential = await this.afAuth.auth.signInWithEmailAndPassword(email,password); var userInfo= await credential.user userInfo.displayN ...

Encountering a premature closure error, specifically the inability to set headers after they have already been sent to the client, when trying to stream video

I am in the process of constructing a video streaming web server with Nestjs. I have diligently followed the steps outlined in the Nest documentation. Unfortunately, I encountered some errors... MY file.controller.ts import { Controller ...

What is the optimal method for defining a JSON serialization format for a TypeScript class?

Currently, I am in the process of developing a program using Angular and TypeScript. Within this program, there is a specific class named Signal that consists of various properties: export class Signal { id: number; obraId: number; obra: string ...

angular-cli encounters errors during ng init and ng build commands, unlike ng new where it does not

While attempting to execute ng build --prod on a customized version of the 5 minute quickstart app, I encountered an error. The project was not initially created with ng, and when running ng build --prod or ng init --source-dir app, I received the followin ...

I'm having trouble managing state properly in Safari because of issues with the useState hook

Encountering Safari compatibility issues when updating a component's state. Though aware of Safari's stricter mode compared to Chrome, the bug persists. The problem arises with the inputs: https://i.sstatic.net/WSOJr.png Whenever an option is ...

Sending intricate JavaScript object to the controller. The array of objects is consistently empty

I am facing an issue with passing an object to my C# controller. While all the properties are getting populated correctly, the list I have always ends up with a count of 0. I've tried setting the header to content-type/json and using Json.stringify. F ...

In terms of function efficiency, what yields better results: using conditional execution or employing conditional exit?

Feedback is welcomed on the efficiency of the following JavaScript/TypeScript solutions: function whatever(param) { if (param === x) { doStuff(); } } or function whatever(param) { if (param !== x) { return false; } doStuff(); } The se ...

How can we optimize component loading in react-virtualized using asynchronous methods?

In my component, I have implemented a react-virtualized masonry grid like this: const MasonrySubmissionRender = (media: InputProps) => { function cellRenderer({ index, key, parent, style }: MasonryCellProps) { //const size = (media.submiss ...

Utilizing async/await in Typescript with Mongoose's EXEC() method

Recently, I've been exploring the combination of Typescript with Express and Mongoose, and the results have been truly impressive. However, I've encountered a minor obstacle that's stalling my progress. Situation: I am running a Mongoose Qu ...

Parsing a JSON array using Moment.js within a subscription function

I have a series of time entries within a data JSON array that I need to parse and format using Moment.js. The formatted data will then be stored in the this.appointmentTimes array for easy access on my view using {{appointmentTime.time}}. Here is the JSON ...

Find a Mongoose query that retrieves items where X exists in both arrays, while Y only exists in one array

I am currently constructing a filtering mechanism and have run into a roadblock. It's worth noting that this code is for demonstration purposes only and does not belong to the actual project, but the core idea remains consistent. I have altered the na ...

ngmodelchange activates when a mat-option is chosen in Angular Material

When a user initiates a search, an HTTP service is called to retrieve and display the response in a dropdown. The code below works well with this process. However, clicking on any option in the dropdown triggers the 'ngmodelchange' method to call ...

A guide on dynamically adding a CSS stylesheet to an Angular component during runtime

I have a requirement to dynamically inject a stylesheet into a component at runtime. The CSS url needs to change depending on user configuration settings and the selected theme. Using styelUrls for static injection won't work in this case, as it is s ...

Angular 4 is unable to attach to 'formGroup' as it is not recognized as a valid property of 'form'

As a beginner with Angular 4, I decided to explore model driven forms in Angular 4. However, I keep encountering this frustrating error. Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form ...

Prevent special characters from being entered into an HTML input box with Angular 7

I'm looking to limit the use of special characters in an HTML input box using Angular 7. I also need to set requirements for only allowing numbers, letters, etc. As I am new to Angular, any assistance would be greatly appreciated. I've attempte ...

Make sure to send individual requests in Angular instead of sending them all at once

I am looking to adjust this function so that it sends these two file ids in separate requests: return this.upload(myForm).pipe( take(1), switchMap(res => { body.user.profilePic = res.data.profilePic; body.user.coverPic = res.data.coverPic; ...

Modify the row height attribute using the grid feature in Material Angular

For desktop, I would like the rowHeight to be set at 80vh. However, if the screen width drops below 500px, I want to dynamically change it to 100vh. I am unsure of how to achieve this. Below is the code snippet: HTML <mat-grid-list cols="4" ...

The wildcard syntax for importing statements in Angular 2

I created multiple classes in a single file with the following structure file: myclasses.ts export class Class1 {....} export class Class2 {....} export class Class3 {....} Now I am attempting to import all of them using a wildcard like this import {*} ...