Error TS2351: You cannot utilize the 'new' keyword with an expression that does not have a call or construct signature

I'm facing a little difficulty with implementing cropperjs in my project. Despite my efforts, I keep encountering the error mentioned above.

Could you please take a look at my code?

module view.pages.controllers {

export class CropToolController {

    public static $inject = ["Cropper"];

    constructor(
        private Cropper: cropperjs.Cropper
    ) {
        var image = document.getElementById('image');
        var cropper = new Cropper(image, {
          aspectRatio: 16 / 9,
          crop: function(e) {
            console.log(e.detail.x);
            console.log(e.detail.y);
            console.log(e.detail.width);
            console.log(e.detail.height);
          }
        });

    }

    private getFileUrl(id: string) {
        return this.$urlHelper.getAssetUrl(id);
    }        
}}

I don't see any errors in the definition file, but maybe I'm missing something

export class Cropper {
    constructor(element: HTMLImageElement, options: CropperOptions);

    crop(): void;
    reset(): void;
    ...}

Does anyone have an idea of what mistake I might be making here? Thank you

Answer №1

Are you attempting to integrate "Cropper" into your project? Remember that you must have an Angular module for the injection to work properly. Have you considered exploring Ng-Cropper as a potential solution?

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

Is it possible for me to create a standalone directive without being dependent on the main application?

I am embarking on a project to create a small library that harnesses the power of angular. My goal is to develop a directive that can be seamlessly integrated into any app without being tied to the initial app that is initialized. Instead of: angular.mod ...

Retrieve the implementation of an interface method directly from the constructor of the class that implements it

I am looking to create a function that takes a string and another function as arguments and returns a string: interface Foo { ConditionalColor(color: string, condition: (arg: any) => boolean): string; } I attempted to pass the ConditionalColor metho ...

Difficulty loading AngularJS 1.3 page on Internet Explorer 8

Being an avid user of Angular, it pains me to even bring up the topic of IE8, a browser that many consider to be pure evil and deserving of extinction. Despite my reservations, I am experiencing difficulties with loading Angular 1.3 in IE8. The page break ...

Using an aria-label attribute on an <option> tag within a dropdown menu may result in a DAP violation

Currently, I am conducting accessibility testing for an Angular project at my workplace. Our team relies on the JAWS screen reader and a helpful plugin that detects UI issues and highlights them as violations. Unfortunately, I've come across an issue ...

The Kendo TreeList is having trouble binding to remote data sources

I have developed a custom directive for TreeList and connected it to a remote service call to fetch data. Below is the snippet of code inside the link method of the directive: scope.treeListOptions.dataSource = new kendo.data.TreeListDataSource({ tran ...

Accessing clipboard contents upon button click using TypeScript

Seeking assistance with retrieving data from the clipboard in TypeScript after clicking on a button. Please provide guidance. Thank you! ...

Converting a JSON array stored in a local file to a TypeScript array within an Angular 5 project

I'm currently working on developing a web app using Angular 5. My JSON file has the following structure: [ { "id": 0, "title": "Some title" }, { "id": 1, "title": "Some title" }, ... ] The JSON file is store ...

What could be causing the unexpected behavior of TypeScript in Visual Studio Code?

VSCode is showing errors, but everything is functioning properly. Here are some of the errors: Type expected. [ { "resource": "/C:/Users/Dell/Desktop/vite-project/src/App.tsx", "owner": "typescript", "code": "1110", "se ...

Issue transferring information between non-related components in an Angular 8 application unrelated to BehaviorSubject

Encountering an issue with passing data between unrelated components using Services and BehaviorSubject. The problem arises when the data is received, as the value of the variable Behavior arrives empty (""), despite the components having no apparent conne ...

Utilizing an Angular Service within the main.ts script

My main.ts file currently has the following code snippet: declare const require; const translations = require("raw-loader!./locale/messages.de.xlf"); platformBrowserDynamic().bootstrapModule(AppModule, { providers: [ { provide: TRANSLATIONS, useVa ...

Changing the way in which text is selected and copied from a webpage with visible white space modifications

After working on developing an HTML parser and formatter, I have implemented a new feature that allows whitespace to be rendered visible by replacing spaces with middle dot (·) characters and adding arrows for tabs and newlines. https://i.sstatic.net/qW8 ...

Experience seamless language translation with AngularJS

I'm just starting out with Angular JS and I'm curious to hear your thoughts on which translation library is the easiest to implement or most commonly used for translating websites with Angular JS. Appreciate any insights you can provide! ...

What is the best way for AngularJS ng-repeat to access the key of an item?

For more information, check out the documentation: https://code.angularjs.org/1.2.26/docs/api/ng/directive/ngRepeat The ngRepeat directive creates a template for each item in a collection. Each template has its own scope with the current item assigned t ...

What mechanism does angularjs employ to detect the $dirty state in the absence of a form tag?

I have implemented $window.addEventListener('beforeunload' to detect changes on a page successfully. Additionally, I am using $transitions.onStart... to monitor navigation with the browser buttons. I find it puzzling though, as my HTML template l ...

Angular - The 'options' property is not found in the 'HTMLOptionElement' type

Currently, I am attempting to modify the choices in a dropdown menu based on the selection made from another dropdown. This problem led me to come across a helpful resource on a website called "Form Select Change Dynamic List Option Elements Tutorial". How ...

AngularJS flip card animation

Exploring the new AngularJS method for animations during page transitions, I am keen on integrating a card flip effect (resembling http://jsfiddle.net/nicooprat/GDdtS/) body { background: #ccc; } .flip { -webkit-perspective: 800; width: 400px; height: ...

How to Toggle Div Visibility with AngularJS ng-show and ng-click

In order to eliminate error messages, I decided to clear the field with a button click. This approach successfully removed the error in my initial test. <div class="errorPopup" data-ng-click="runner.Name = null" data-ng-show="mainForm.name.$error.pat ...

Obtain XML information that is not categorized under any specific node

Currently in the process of upgrading an extremely outdated webpage to utilize Angular. The webpage is currently loading data from an XML document structured as follows: <xml> <PREMout> <PolicyNumber>12345</PolicyNumber> &l ...

Utilizing prerender.io with lazy loading in Angular 2: A comprehensive guide

As Angular Universal is not expected to be included in the CLI for some time, I've had to resort to using prerender.io in order to ensure proper SEO functionality. However, my tests have shown that there are issues with lazy loaded modules causing SEO ...

Select the implied type from a resolved Promise type in Typescript

I am working with a function called getStaticProps in Next.js that returns a Promise, resolving to an Object with the following structure: type StaticProps<P> = { props: P; revalidate?: number | boolean; } To generically "unwrap" the type o ...