如何将JavaScript文件导入angular2答案

【问题标题】：How to import JavaScript file into angular2如何将JavaScript文件导入angular2
【发布时间】：2017-07-17 15:55:51
【问题描述】：

我无法弄清楚如何将 javascript 文件导入到我的 angular2 项目中。这是一个不属于 npm 的模块的文件，我能找到的唯一说明是使用 npm，这在此处不是一个选项。

我正在使用 angular cli，在我的 angular-cli.json 文件中我有：

{
"apps": [
  "styles": [..],
  "scripts": ["../pathtomyjs/file.js"] 
]}

我运行了 ng build 和 ng serve，当我打开我的应用程序并查看 Web 控制台并尝试引用我的 js 文件中的函数时，我能够成功地做到这一点。

我在控制台中输入的示例：

var test = MyObject;

我得到 test = {};

但是，当我尝试这样做时

let test = MyObject;

在我的组件 .ts 文件中，我得到：

home.component.ts (10,11): Cannot find name 'MyObject'.)

不确定如何在 Angular2 中执行此操作。

谢谢！

【问题讨论】：

【解决方案1】：

它是第 3 方库吗？您必须让 typescript 编译器知道类型定义文件在哪里。通常，它位于node_modules/@types 文件夹下。例如，如果你想使用jQuery，你可以通过运行安装必要的类型定义文件：

npm install @types/jquery

【讨论】：

【解决方案2】：

我将我的js 文件放入app/assets/scripts 并将它们加载到index.html <script src="assets/scripts/foobar.js"></script> 。这是针对 ionic2 / angular2 项目的。

在模块中，你必须在模块文件的全局范围内定义这样的函数

declare var myFancyFunction;

【讨论】：

【解决方案3】：

做：

declare var MyObject: any;

let test = MyObject;

或者：

let test = (<any> MyObject);

对于 jQuery：

declare var jQuery: any;

jQuery.ajax({ ... });

【讨论】：

谢谢 Dan，我结束了将 declare var 语句放在我的 ts 文件中的 import 语句下面，我尝试做 let test = MyObject 但我仍然收到错误。将 let 更改为 public 有效！是不是我做错了什么导致声明“让”不起作用？
没关系，我只需要在 test 前面去掉“let”，就不再需要“public”了。

【解决方案4】：

我对此here进行了深入研究：

这是一个很好的问题，我很高兴你提出这个问题，因为我希望我在第一次遇到这个小问题时就拥有了我将要写的东西。这是一个 typescript/javascript 和 webpack 问题，然后是角度问题。我肯定会尽快在my blog 上写一篇文章。

您的场景：

你跑

npm install mathjs

现在您尝试使用组件中的 math.js：
找到 math.js dist js 文件 (node_modules/mathjs/dist/math.js) 并像这样引用

import {mathjs} from "../../node_modules/mathjs/dist/math";
但是你收到错误消息说"set --allowJS". 你这样做是这样的：

Set --allowJS in config (tsconfig.json) { "compilerOptions": { "allowJs": true, ...
现在你得到：

../node_modules/mathjs/dist/math.js (12209,13) 中的错误：无法访问检测到代码。

解决方案：为目标库 (@types/mathjs) 安装类型文件