Angular4-在JavaScript文件中使用函数

我正在尝试将JavaScript文件加载到我的angular组件中。我已经从这里加载了完整的简化版本：并且将所有相关脚本放在我的脚本文件夹中

当代码运行并到达“loadImage”时，控制台将触发一个错误：

错误引用错误：未定义loadImage

解决这个问题的最佳方法是什么

组件

import '../../../assets/scripts/load-image.all.min.js';
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,
     // downsamplingRatio: 0.5,
     orientation: true
   }
   if (!file) {
     return
   } else {

   this.currentFile = file;   
   if (!loadImage(file, this.updateResults, options)) {

   }

  }
}

---

我认为这个问题与其他“将JS文件导入angular”问题略有不同，因为我觉得这可能与我试图导入的库有关。但是，我对此不确定，正在寻求建议。

我认为您需要在导入的文件中导出所需的函数。

您必须确保库将被编译 在angular cli.json中添加脚本

"scripts": [
....
'<path to file>/assets/scripts/load-image.all.min.js'
....
]

---

您尝试导入的库不支持es6模块。由于库中没有导出，因此在导入后它不会将任何变量添加到范围中

在您的特定情况下，最简单的方法是将脚本添加到index.html：

并使用

window.loadImage（文件，this.updateResult，选项）

我使用

window

，因为库直接将自身绑定到window.object

---

更多详细信息

• 要在typescript中使用javascript模块，请将

  allowJs:true

  添加到

  tsconfig.js

  文件

• import./file

  被称为仅用于副作用的导入，不更改模块的范围，但可以访问全局应用范围。如果您想扩展已经导入的模块，它可以帮助您

• 您可以通过不同的方式导入js模块：
  • 对于CommonJs模块，可以使用“/modulePath.js”中的

    import*作为ModuleName并调用为
    ModuleName.exportedMethod（）
    

  • 到角度管道，以确保其加载了 进口它。如果您使用的是angular cli，只需将其包括在内即可 apps/scripts部分中的angular-cli.json：

    {
      "apps":
         ...
         "scripts": [
             "assets/scripts/load-image.all.min.js"
         ]
    }
    

  • 如果不使用angular cli，可以在

    index.html

    中包括：

---

重复-可能重复感谢您的回复。道歉。这是新的。您是指“load image.all.min.js”文件吗？如果是的话，你是如何建立一个出口的？谢谢Segito-我也试过这个。解决方案已编译，但浏览器控制台显示“未捕获引用错误：未定义需求”。我不知道你能做到。当我换到上面的时候，发生了一些事情。可视化代码声明该文件“已从“…”解析为“…”，但未设置“--allowJs”。-它仍然可以编译。在浏览器中，我运行代码，现在得到“LoadImage.LoadImage不是一个函数”-我是否遗漏了任何明显的内容？为了澄清，我删除了angular-cli.json文件中的任何引用，并刚刚实现了上述功能。再次感谢尤金！我刚刚看到你的最新评论。我删除了组件导入，并将脚本添加到angular cli文件中。对吗？还是两者都需要？如果两者都有，则无法编译。如果仅在angular cli中有引用，如何在组件文件中调用它？谢谢你的时间！：）你说得对，谢谢你的纠正！只能以一种方式导入，不能同时以两种方式导入。我会更正答案的。谢谢尤金。我对发生的事情有点困惑。如果在索引文件或angular cli中包含脚本，浏览器控制台将抛出错误：“Uncaught ReferenceError:未定义require”。但是，如果我将该文件导入component.ts文件（而不是模块），然后将该函数引用为Loadimage.Loadimage，则表明“Loadimage.Loadimage不是函数”。有什么想法吗？很好，你可以将

--allowJs

添加到你的tsconf中。我刚刚意识到，您的库并没有使用任何值将loadImage函数直接导出和绑定到窗口对象。

{
  "apps":
     ...
     "scripts": [
         "assets/scripts/load-image.all.min.js"
     ]
}