What is preventing me from utilizing TouchEvent in Safari browser?

Recently, while working on a project utilizing Angular 8, I encountered an issue regarding touch event handling. In my code, I had a handler setup like this:

@HostListener('touchend', ['$event']) onTouchend(event: TouchEvent) {
    event.preventDefault();
}

Interestingly, when testing on MacOS 10.15, everything worked smoothly in Chrome but ran into issues with Safari. An error message stating "ReferenceError: Can't find variable: TouchEvent" popped up in Safari, and in Firefox there was another error - "ReferenceError: TouchEvent is not defined". Surprisingly, changing the event type to 'any' allowed it to function in both Safari and Firefox. This leaves me wondering why TouchEvent doesn't work on Safari.

angulartypescriptfirefoxsafariwebkit

Answer №1

To enhance your application, incorporate the following code snippet:

export type AppTouchEvent = TouchEvent;

Afterward, utilize AppTouchEvent in all of your TypeScript files instead of TouchEvent.

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

Injecting Variables Into User-Defined Button

Presenting a custom button with the following code snippet: export default function CustomButton(isValid: any, email: any) { return ( <Button type="submit" disabled={!isValid || !email} style={{ ...

javascriptreactjstypescriptbuttonmaterial-ui

Oops! An issue occurred during the `ng build` command, indicating a ReferenceError with the message "Buffer is not defined

I'm facing an issue while trying to utilize Buffer in my angular component ts for encoding the Authorization string. Even after attempting npm i @types/node and adding "node" to types field in tsconfig.json, it still doesn't compile with ng buil ...

angulartypescript

Retrieve a single user using a query in the GraphQL platform

I've been struggling to create a GraphQL query in Express that retrieves only one user instead of all users every time. This is the query I'm using, incorporating TypeORM as my ORM: import { GraphQLList, GraphQLID } from 'graphql'; imp ...

typescriptexpressgraphqltypeorm

What is the key to mastering any concept in Angular2 for optimal results?

When creating a Pipe to filter data, I often use the datatype any, allowing for flexibility with types. However, I have some questions regarding this approach: Is it considered a best practice? Does it impact performance when handling large amounts of da ...

angulartypescript

Troubleshooting a navigation issue in Angular involving the mat-sidenav element of material UI while transitioning between components

I would greatly appreciate your assistance in resolving the issue I am facing. I have been trying to navigate from one view to another, but when I use an <a> tag nested within a <mat-sidenav>, I encounter the following error: "Uncaught (in prom ...

javascripthtmlangular

Dealing with Type Casting Problems Following the Migration to Angular 4

Following my upgrade to Angular 4, I encountered the error mentioned below [enter image description here][1] client?afea:119 [at-loader] ./src/test/javascript/spec/app/account/settings/settings.component.spec.ts:49:13 TS2322: Type 'Principal&apo ...

angularjhipsterangular2-services

Angular route permissions and safety

Exploring the world of Angular has introduced me to its intricate routing mechanics and the use of routing guards for authorization on different routes. However, I can't help but feel like this guard mechanic may not be enough to fully secure my web s ...

angular

Steps to create a fixed pattern background image with a customizable background color based on the content within a div element

I am seeking guidance on how to create a single page application using Angular that features a fixed background image (such as a white pattern) in the BODY tag. However, I would like the ability to change the color behind this image depending on the conten ...

cssangular

Is it necessary to sanitize input fields manually in Angular 6?

Is it necessary for me to manually sanitize all user inputs, or does Angular handle this process automatically? In my login form, the data is sent to the server upon submission. Do I need to explicitly sanitize the data, or does Angular take care of sanit ...

javascriptangulartypescriptangular6sanitization

What steps can be taken to ensure that all object properties become reactive?

Let's dive into this simplified scenario: interface Pup { name: string; age: number; } const puppy: Pup = { name: 'Rex', age: 3, }; The goal here is to establish a reactive link for each attribute within the puppy object. The usua ...

javascripttypescriptvue.jsvue-composition-apivue-reactivity

Hey there world! I seem to be stuck at the Loading screen while trying to use Angular

A discrepancy in the browsers log indicates node_modules/angular2/platform/browser.d.ts(78,90): error TS2314: Generic type 'Promise' is missing 2 type arguments. ...

angulartypescript

CakePHP and nested AJAX forms causing issues in Firefox 3.5

Is it feasible to create a nested ajax form in cakephp that functions properly in Firefox? $ajax->form(form1...) table row $ajax->form(childForm_rowId) $form->end(childForm_rowId) endrow end table $form->end I h ...

ajaxfirefoxcakephpformsnested

What's Causing the UNMET PEER DEPENDENCY Error in Angular 8 with @angular/[email protected]?

After updating to the latest version of Angular 8, everything seems to be working fine without any issues. However, I am seeing some strange messages when running npm list after completing npm install: UNMET PEER DEPENDENCY @angular/<a href="/cdn-cgi/ ...

angularnpmnpm-install

Infinite rendering caused by React custom hook

I developed a custom hook that retrieves data from a News API and provides handling for loading, errors, and data (similar to Apollo Client). The issue I'm facing is that the hook seems to trigger infinitely, even when the items in the dependency arra ...

javascriptreactjstypescriptreact-hooks

What is the error message "Cannot assign type 'IArguments' to argument"?

Currently employing a workaround that is unfortunately necessary. I have to suppress specific console errors that are essentially harmless. export const removeConsoleErrors = () => { const cloneConsoleError = console.error; const suppressedWarnings ...

typescript

Executing ng test and ng serve at the same time

As someone who is still learning Angular 5, I am in the process of setting up a development environment for my team to work on a new Angular 5 application. My goal is to have our team able to run linting tests and unit tests every time they make changes, ...

angularkarma-runnerangular-cliwebpack-dev-server

Angular 10 experiences issues with JWT Helper service causing errors

Currently, I'm facing an issue with my Angular 10 project and the latest JWT Helper service. Unfortunately, the app is failing to compile. The error message that pops up reads as follows: ERROR in node_modules/@auth0/angular-jwt/lib/jwthelper.servic ...

angularcompilationivyjwt

What techniques can I use to modify an object while it's being iterated through?

I've been attempting to manipulate the object while looping through it, but unfortunately, it's not working. How can I modify it so that the constant patient includes the property lastActivity inside the this.model array? My code looks like this ...

javascriptangulartypescript

Best practices for interacting with a REST API using Angular

I am currently working on a web Angular app where in globalservice.ts I have defined basepath:string = "https://myapi.com/api/v2/". I need to retrieve data from this API. To achieve this, I have included the following code snippet in server.js. Any recomme ...

angularmongodbexpress

Encountering an issue in Angular 2: Unable to locate the name 'AmCharts' during ahead-of-time compilation

During the implementation of ahead-of-time compilation (AOT) in my ongoing project, I encountered the following error related to an external library called AmCharts. Error message: Cannot find name 'AmCharts'.Cannot find name 'AmCharts&apos ...

angularamcharts