使用 Javascript 库函数的 Angular 组件抛出类型错误：不是函数答案

【问题标题】：Angular Component using Javascript Library function throwing Type Error: is Not a Function使用 Javascript 库函数的 Angular 组件抛出类型错误：不是函数
【发布时间】：2020-07-19 05:43:57
【问题描述】：

我编写了一个简单的 Javascript 库来将一些 Angular 组件需要使用的函数组合在一起。 calcs.js 库中有几个这样的函数：

function calculateCosts(object) {

  do some stuff.....
  return answer;
}

我将这个库包含在我的 Angular 组件中，如下所示：

import * as calc from '../scripts/calcs.js';

然后我从我的 ngInit() 中调用这个函数，如下所示：

ngInit() {
  var costs = calc.calculateCosts(stuff);
}

它编译并在运行时抛出以下错误：

ERROR TypeError: _scripts_calcs__WEBPACK_IMPORTED_MODULE_5__.calculateTotalCosts is not a function

我这样做正确吗？这是我第一次尝试编写自己的 javascript 函数库并将其包含在组件中，所以我可能做了一些非常愚蠢的事情。

我在导入中肯定有正确的路径，并且在组件中有正确的函数名

感谢所有帮助

【问题讨论】：

calcs.js 的导出语句是什么样的？
@mbojko 这只是一个包含上述函数的文件——我没有任何导出语句
您需要导出calculateCosts function。只需在此之前添加export。喜欢export function calculateCosts(){..}。 typescriptlang.org/docs/handbook/modules.html

标签： javascript angular

【解决方案1】：

无法导入模块未导出的内容。您可以在库中简单地添加 export 语句：

export function calculateCosts(object) {
// do some stuff.....
    return answer;
}

【讨论】：