如何将 JavaScript 文件导入 angular2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42478930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to import JavaScript file into angular2
提问by Kevin Sar
I am having trouble figuring out how to import a javascript file into my angular2 project. It is a file that is not a module that is apart of npm and the only instructions I have been able to find is using npm which is not an option here.
我无法弄清楚如何将 javascript 文件导入到我的 angular2 项目中。它是一个文件，它不是 npm 之外的模块，我能找到的唯一说明是使用 npm，这在这里不是一个选项。
I am using angular cli and in my angular-cli.json file I have:
我正在使用 angular cli 并且在我的 angular-cli.json 文件中我有：
{
"apps": [
"styles": [..],
"scripts": ["../pathtomyjs/file.js"]
]}
I ran ng build and ng serve and when I open up my app and look at the web console and try referencing the function that is in my js file, I am able to do so successfully.
我运行了 ng build 和 ng serve，当我打开我的应用程序并查看 Web 控制台并尝试引用我的 js 文件中的函数时，我能够成功地做到这一点。
Example in the console I type in:
我在控制台中输入的示例：
var test = MyObject;
and I get test = {};
我得到 test = {};
However, when I try do
但是，当我尝试做
let test = MyObject;
in my component .ts file I get :
在我的组件 .ts 文件中，我得到：
home.component.ts (10,11): Cannot find name 'MyObject'.)
Not sure how to do this in Angular2.
不确定如何在 Angular2 中执行此操作。
Thanks!
谢谢！
采纳答案by Dan
Do:
做：
declare var MyObject: any;
let test = MyObject;
Or:
或者：
let test = (<any> MyObject);
For jQuery:
对于 jQuery：
declare var jQuery: any;
jQuery.ajax({ ... });
回答by pixelbits
Is it a 3rd party library? you'll have to let the typescript compiler know where the type definition files are. Normally, it looks under node_modules/@typesfolder. For example, if you wanted to use jQuery, you would install the necessary type definition files by running:
它是第 3 方库吗？您必须让打字稿编译器知道类型定义文件的位置。通常，它在node_modules/@types文件夹下查找。例如，如果您想使用jQuery，您可以通过运行以下命令来安装必要的类型定义文件：
npm install @types/jquery
回答by Richard Strickland
I did a deep dive on this here:
我在这里对此进行了深入研究：
This is a great question and I'm glad you ask because I wish I had what I'm about to write the first time I encountered this little problem. This is a typescript/javascript and webpack issue before it is an angular issue. I definitely am planning a writeup on my blogsoon as possible.
这是一个很好的问题，我很高兴你提出这个问题，因为我希望我第一次遇到这个小问题时就知道我要写的东西。这是一个打字稿/javascript 和 webpack 问题，然后才是角度问题。我绝对计划尽快在我的博客上写一篇文章。
Your Scenario:
你的场景：
You run
你跑
npm install mathjs
- Now you try to use math.js from a component:
Find math.js dist js file (node_modules/mathjs/dist/math.js) and reference like this
import {mathjs} from "../../node_modules/mathjs/dist/math";But you get error message saying
"set --allowJS".You do that like this:Set --allowJS in config (tsconfig.json) { "compilerOptions": { "allowJs": true, ...Now you get:
- 现在您尝试从组件中使用 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, ...现在你得到：
ERROR in ../node_modules/mathjs/dist/math.js (12209,13): Unreachable code detected.
../node_modules/mathjs/dist/math.js (12209,13) 中的错误：检测到无法访问的代码。
- Looking in the math.js source, you see that it is an old school module but there is no root wrapper function (one function to bring them all and in the darkness bind them..) (more on that later).
- 查看 math.js 源代码，您会看到它是一个旧式模块，但没有根包装函数（一个函数将它们全部带入并在黑暗中绑定它们......）（稍后会详细介绍）。
Solution: install a typings file for the target lib (@types/mathjs)
解决方案：为目标库安装一个打字文件（@types/mathjs）
回答by El Dude
I put my jsfiles into app/assets/scriptsand load them in index.html<script src="assets/scripts/foobar.js"></script>. This is for a ionic2/ angular2project.
我将我的js文件放入app/assets/scripts并加载到index.html<script src="assets/scripts/foobar.js"></script>. 这是一个ionic2/angular2项目。
In the module you have to define your functions like this in global scope of the module file
在模块中，您必须在模块文件的全局范围内定义这样的函数
declare var myFancyFunction;
declare var myFancyFunction;
