Angular4组件引入JS库报错：loadImage未定义，求解决方案

你遇到的这个ReferenceError其实是Angular的模块打包机制和blueimp库的全局变量暴露方式不兼容导致的——直接在组件里import全局JS文件，Angular的打包工具不会把库的全局变量注入到组件作用域里，所以TypeScript找不到loadImage变量。下面给你几个亲测有效的解决办法：

方案一：通过Angular CLI配置全局加载脚本（最推荐） #

Angular 4使用的是.angular-cli.json配置文件，我们可以把这个库加入全局脚本列表，让CLI在打包时把它放到vendor bundle里，全局暴露变量：

1. 打开项目根目录下的.angular-cli.json
2. 找到apps[0].scripts数组，添加你的脚本路径：

"scripts": [
  // 其他已有的脚本...
  "assets/scripts/load-image.all.min.js"
]

3. 重启你的Angular开发服务器（ng serve），确保配置生效
4. 回到你的组件，删除原来的import语句，只保留declare声明即可：

declare var loadImage: any;

// 你的组件代码...
dropChangeHandler(e) {
  e.preventDefault()
  e = e.originalEvent
  var target = e.dataTransfer || e.target
  var file = target && target.files && target.files[0]
  var options = {
    maxWidth: 1000,
    maxHeight: 1000,
    canvas: true,
    pixelRatio: window.devicePixelRatio,
    orientation: true
  }
  if (!file) {
    return
  } else {
    this.currentFile = file;
    if (!loadImage(file, this.updateResults, options)) {
      // 可按需添加加载失败的提示逻辑
    }
  }
}

方案二：使用require导入库（适合灵活加载场景） #

如果不想全局加载，你可以用CommonJS的require语法直接导入库，同时确保TypeScript支持：

1. 打开tsconfig.json，确保配置了：

{
  "compilerOptions": {
    "allowJs": true,
    "module": "CommonJS"
    // 其他配置...
  }
}

2. 修改组件代码，替换原来的import和declare：

const loadImage = require('../../../assets/scripts/load-image.all.min.js');

// 你的组件代码...
dropChangeHandler(e) {
  // 原逻辑不变，直接使用loadImage即可
}

方案三：添加类型定义文件（让TypeScript更友好） #

如果想获得更好的TypeScript类型提示，可以创建一个自定义的类型定义文件：

1. 在项目的src目录下创建load-image.d.ts文件，内容如下：

declare function loadImage(
  file: File | Blob | string,
  callback: (img: HTMLImageElement | HTMLCanvasElement, data: any) => void,
  options?: {
    maxWidth?: number;
    maxHeight?: number;
    canvas?: boolean;
    pixelRatio?: number;
    orientation?: boolean;
    // 可根据库的文档添加更多配置项
  }
): boolean;

2. 之后在组件里只需要保留declare var loadImage: any;即可（如果是全局加载的方式，TypeScript会自动识别这个类型定义）

内容的提问来源于stack exchange，提问作者user8516249