Angular 5集成angular-croppie-module时@type/croppie导入失败求助

Hey there! I totally get how frustrating it is to hit a wall with a third-party module when you're new to Angular 5. Let's break down your issue and fix that ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_croppie___default.a is not a constructor error.

Root Cause #

As you noticed, the croppie.directive.d.ts file imports Croppie as a namespace instead of a class. When your code tries to instantiate it with new Croppie(), Webpack can't resolve the constructor because it's looking for a default export instead of the class nested under the namespace.

Step-by-Step Fixes #

1. Adjust the Import & Instantiation in the Directive

First, let's fix how the Croppie library is referenced in the directive code:

• Open the croppie directive file (likely croppie.directive.ts)
• Replace any default import like import Croppie from 'croppie' with a namespace import:

  import * as Croppie from 'croppie';
  

• When creating the Croppie instance, explicitly reference the class from the namespace:

  this.croppieInstance = new Croppie.Croppie(this.elementRef.nativeElement, this.croppieOptions);
  

2. Verify Croppie Version Compatibility

Angular 5 is an older version, and the angular-croppie-module might not play nicely with the latest Croppie releases. Check the module's package.json to see which Croppie version it's designed for, then install that specific version:

npm install croppie@<target-version> --save

This ensures there's no mismatch between the library code and the type definitions.

3. Manually Update the Type Definition File

If the croppie.directive.d.ts is still causing issues, tweak it to properly reference the namespace:

import * as Croppie from 'croppie';

@Directive({
  selector: '[croppie]'
})
export class CroppieDirective {
  private croppie: Croppie.Croppie;
  // ... rest of your directive code

  ngAfterViewInit() {
    this.croppie = new Croppie.Croppie(this.elementRef.nativeElement, this.options);
  }
}

4. Fallback: Build Your Own Simple Croppie Directive

If the angular-croppie-module is unmaintained or too problematic, it's straightforward to wrap Croppie yourself:

// croppie.directive.ts
import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import * as Croppie from 'croppie';

@Directive({
  selector: '[appCroppie]'
})
export class CroppieDirective implements OnInit {
  @Input() croppieOptions: Croppie.CroppieOptions = {};

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    new Croppie.Croppie(this.elementRef.nativeElement, this.croppieOptions);
  }
}

Then use it in your template:

<div appCroppie [croppieOptions]="{ viewport: { width: 200, height: 200 }, boundary: { width: 300, height: 300 } }"></div>

Final Notes #

Since Angular 5 is end-of-life, you might run into more compatibility issues with modern libraries long-term. But for this specific problem, adjusting the namespace import and instantiation should get croppie working in your app.

内容的提问来源于stack exchange，提问作者E. Sanquer