Having trouble setting up Raygun in Angular version 6 with TypeScript?

Encountering Setup Issue with Raygun in Angular Version 6 Using TypeScript

Problem:

ERROR in src/app/app.raygun.setup.ts(6,20): error TS2304: Cannot find name 'RaygunV2'.

This specific line seems to be causing trouble: declare let rg4js: RaygunV2;

I've added these npm packages for Raygun:

@types/raygun4js: "^2.6.0 AND raygun4j": "^2.10.0

File: app.raygun.setup:

import * as rg4js from 'raygun4js';
import { ErrorHandler } from '@angular/core';

import { environment } from '@env/environment';

declare let rg4js: RaygunV2;

rg4js('apiKey', '9bimuASis2Cyjx/mrKTmeQ==');
rg4js('setVersion', '1.0.0.0');
rg4js('enableCrashReporting', environment.raygun.isActive);

export class RaygunErrorHandler implements ErrorHandler {
  handleError(e: any) {
    rg4js('send', { error: e });
  }
}

Module: app.module:

 providers: [
    { provide: ErrorHandler, useClass: RaygunErrorHandler }
 ],

Answer №1

The reason for this issue is a mistake in not including the RaygunV2 object in the type definitions we export. This will be rectified in the upcoming release of Raygun4JS, although there is no specific timeframe for when that will happen. In the meantime, the temporary solution is to define the variable as any.

On a side note, it appears that you haven't attempted to import the RaygunV2 type yet. When we do eventually export the type from our definitions, you will need to incorporate that into your code.

Update (25/10/18): While the issue remains unresolved, you can utilize the following workaround:

import { RaygunV2 } from 'raygun4js';
const rgj4s: RaygunV2 = require('raygun4js');

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

Tips for getting links to wrap or scroll within a column element in Angular

In my row element with two columns, I am facing an issue where the first column sometimes overlaps the second column due to a very long link in the problem.problem_description section. I want to find a way to have long links wrap or be scrollable. However, ...

The issue with Angular 5 Interceptor failing to log out upon a server call error

Source : https://gist.github.com/tobbbe/08e01db92c32346b226333a3f952df22 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(this.addToken(request)) .pipe( ...

Leverage JSON files for pagination in NextJS

I am currently developing a science website where the post URLs are stored in a static JSON file. ScienceTopics.json- [ { "Subject": "Mathematics", "chapters": "mathematics", "contentList": [ ...

Unique icons crafted for iOS and Android devices

I have unique custom icons named "md-usb.svg" for both iOS and Android. After copying the Android icon to the designated folder: android\app\src\main\assets\public\svg When searching for the standard icon md-bluetooth.svg, ...

Is it better to wait for an ajax request to finish loading in a vue or angular SSR environment?

Currently, I have a Vue or Angular application in place. Upon loading the app component, an AJAX request is made to retrieve the data that will be displayed in the child components. In addition, I am utilizing server-side rendering (SSR). My query pertai ...

Angular-Serviceworker: The start URL fails to return a 200 status code when offline

Recent Versions "@angular/common": "~9.0.0" "@angular/service-worker": "~9.0.0" Exploration Utilizing the service-worker was achieved by executing ng add @angular/pwa --project [app] which triggered Lighthouse to acknowledge the web-app as a PWA. Howev ...

Checking Validity of an Array of URLs with Class-Validator

I'm utilizing Class-Validator for validating DTO properties in my Nest.js application. One of the properties is "images", which is an array of strings representing URLs. I need to validate each URL in this array. class SomeDto { // ... // Arr ...

How can I incorporate a callback function into Typescript when using Angular Material?

I am utilizing the Angular Material Dialog component and aiming to include an optional callback function, which will be triggered upon the user clicking the OK button. Can anyone guide me on how to achieve this? askUser(customData: any) { openDialog() ...

Is it necessary for the object name to begin with a lowercase letter?

export class Dish { } File2 import { Dish } from '../shared/dish'; const DISHES: Dish[] = [ { id: '0', name: 'Uthappizza', image: '/assets/images/uthappizza.png', category: 'mains', ...

Webpack FileAddPlugin: move file to specified directory

How can I include the current module folder in my webpack compilation output to the dist/ directory? Currently, my /dist folder contains the following: const toCopy = [ './../../../../node_modules/flatpickr/dist/flatpickr.min.js', './../ ...

Enabling or disabling a button dynamically in Ionic based on a conditional statement

I am looking to dynamically enable or disable buttons based on specific conditions. The data is retrieved from Firebase, and depending on the data, I will either enable or disable the button. For example, if a user passes the First Quiz, I want to enable ...

Mastering the art of utilizing Function's construct signatures within TypeScript

Currently delving into the TypeScript documentation, specifically exploring More on Functions. However, I find myself perplexed by the code snippet provided below. Can someone offer guidance on how to implement this in practical development scenarios? An ...

The Sharp Promise<Buffer>[] lacks some essential properties compared to the type Promise<File | File[]>: specifically, then, catch, finally, and [Symbol.toStringTag]

I wrote a script to verify and convert images as they pass through. Utilizing resources from nestjs, magic-bytes.js, and Sharp. However, I encountered the following error: Type 'Promise<Buffer>[]' is missing the following properties from ...

Tutorial on implementing chartjs-plugin-crosshair in Angular 6 and beyond

I integrated ChartJs into my Angular 6+ project, but encountered an issue with the chartjs-plugin-crosshair not functioning as expected. The version of ChartJs I am using is 2.8.0. Below is the TypeScript file associated with the chart implementation: Th ...

Angular can be used to compare two arrays and display the matching values in a table

Having two arrays of objects, I attempted to compare them and display the matching values in a table. While looping through both arrays and comparing them by Id, I was able to find three matches. However, when trying to display these values in a table, onl ...

The plugin registration failed for 'html-webpack-plugin-before-html-processing' as the specified hook could not be located

An error occurred: Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. The hook was not found. BREAKING CHANGE: There must be a hook at 'this.hooks'. To create a compatibility layer for this hook, hook into & ...

Acquiring the Auth0 authentication token

Currently, I am using the Angular SDK of Auth0 and everything seems to be functioning correctly except for retrieving the token. At the moment, I am manually obtaining the token from my dashboard. The method in Auth0Service called getAccessTokenSilently i ...

Guide on successfully importing a pretrained model in Angular using TensorFlow.js

I need help with uploading a pretrained Keras model to my existing tensorflow.js model and then making simple predictions by passing tensors in the correct format. The model is stored locally within the project, in the assets folder. export class MotionAn ...

We are encountering an issue with a missing module: Error: Unable to locate '@angular/flex-layout' in the 'app' directory

Out of nowhere I encountered the following error: Module not found: Error: Can't resolve '@angular/flex-layout' in '\src\app' This issue popped up right after I installed @angular/cdk. To address this error, I reinstal ...

Tips for utilizing the Fluent UI Northstar Color Palette

When working with Fluent UI Northstar, one helpful feature is the color palette. While the documentation provides a list of color names and gradients that can be found here, it can be confusing on how to actually utilize these values (such as 100, 200, e ...