如何在angular5项目中导入外部js文件？答案

【问题标题】：How to import external js file in angular5 project?如何在angular5项目中导入外部js文件？
【发布时间】：2018-05-29 08:41:32
【问题描述】：

我刚刚加入了一个 Angular 5 项目（技术新手）。我需要使用外部 javascript 文件中的函数。

但它不起作用。我做错了什么？

我在项目中添加了我的 js 文件，并在 .angular-cli.json 中声明了它： "scripts": [ "./assets/js/kia.js" ],
然后我在 typings.d.ts 中声明了它： declare var kia: any;
最后我尝试将它导入到我使用的文件中 detail.component.ts ： import * as variable from 'kia';

我遇到了错误：错误 TS2307: 找不到模块“起亚”。

有人知道如何解决这个问题吗？

【问题讨论】：

在我的 component.ts 中，我将导入更改为：import * as kia from '../../assets/js/kia.js'; 并在 tsconfig.json 中添加了"allowJs": true,编译器选项。现在我有错误：src/typings.d.ts(3,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'kia' must be of type '{ COMMANDE_INIT: string; COMMANDE_EXECUTER_CALLBACK: string; ACQUITTER_: string; m_NomFenetre: an...', but here has type 'any'.

【解决方案1】：

您可以像往常一样将它包含在您的 index.html 中（在脚本标签中），如有必要，可以在您的 typings.d.ts 中添加类型定义，或者最好为它找到一个 @types 包。

否则你可以做你正在做的事情。只要确保你的路径是正确的，然后因为你已经将它添加到你的类型文件中，你不需要在你的 ts 文件的顶部导入它，你可以像引用它一样引用它。

const a = kia. ...

如果你已经使用 npm 包安装了它，那么你应该导入它，就像你正在做的那样

【讨论】：

自制的跨应用js文件，npm不能用。我很难理解他如何从我在 typings.d.ts 中写的少量内容中找到 js 文件。所以我应该删除导入并直接在我的组件中使用它？
@PoncelinJuriaan 您是否尝试过删除 ts 文件顶部的导入，并仅使用您声明的 kia var 引用了您需要的内容。例如，如果 foo 是 kia 中的一个函数，您可以通过 kia.foo() 在项目中的任何位置访问 foo
如果我删除 ts 文件中的导入，我不再有任何错误，但它看起来不像在工作。在我添加的 html 组件中：<button onclick="kia.test();">test</button> 我进入了 chrome Uncaught TypeError: kia.test is not a function at HTMLButtonElement.onclick。当我在 chrome 中浏览源代码时，我找不到我的 kia.js，但我确实在“scripts.bundle.js”中找到了代码。
@PoncelinJuriaan 您应该尝试使用 Angular 的内置（单击）事件处理程序。所以它的。否则你的函数作用域会不正确，chrome会记录上面的错误
感谢我们越来越近 =)。但现在我在日志中有这个：错误类型错误：无法在 callWithDebugContext （core. js:15056) 在 Object.debugHandleEvent [as handleEvent] (core.js:14643) 在 dispatchEvent (core.js:9962) 在 eval (core.js:10587) 在 HTMLButtonElement.eval (platform-browser.js:2628)在 ZoneDelegate.invokeTask (zone.js:421) 在 Object.onInvokeTask (core.js:4740) 在 ZoneDelegate.invokeTask (zone.js:420)

【解决方案2】：

我通过删除component.ts中的导入解决了这个问题，然后添加了一个链接方法（）；在 component.html 中，并在 componant.ts 中声明 method() { kia.test();}。

【讨论】：