在angular 2中使用javascript库 [英] Using javascript library in angular 2

问题描述

假设我想在我的angular 2应用程序中使用以下库: https://github.com/serkanyersen/ifvisible.js

Assuming I want to use the following library in my angular 2 app: https://github.com/serkanyersen/ifvisible.js

我需要做什么?

我尝试使用以下方法更新SystemJS配置:

I tried to update my SystemJS config with:

 var map = {
 `'ifvisible.js': 'node_modules/ifvisible.js'`
}
var packages = {
'ifvisible.js': {defaultExtension: 'js', main:'src/ifvisible.min' }
  };

还将此添加到了我的index.html中:

Also added this to my index.html:

<script src="node_modules/ifvisible.js/src/ifvisible.min.js"></script>

以及在我的组件中:

import * as ifvisible from 'ifvisible.js';

我得到错误TS2307:找不到模块'ifvisible.js'.

怎么了?

推荐答案

仅使用给定的打字稿定义即可从节点模块导入.幸运的是invisible.js有一个.

Importing from node modules can be done with only given their typescript definitions. Fortunately invisible.js has one.

假设您正在使用node_modules旁边的文件夹，请在要导入的文件顶部添加引用

Assuming you're working in a folder next to node_modules, add a reference to the top of the file you are importing

/// <reference path="../node_modules/ifvisible.js/ifvisible.d.ts"/>

也可以导入；

import ifvisible = require( 'ifvisible');

如果要在运行时javascript中使用它，请将脚本添加到index.html;

If you want to use it in runtime javascript, add the script into index.html;

<script src="node_modules/ifvisible.js/src/ifvisible.min.js"></script>

请记住，尽管提供node_modules作为公用文件夹不是一个好习惯，但我建议您将ifvisible.min.js复制到单独的公用文件夹中.

keep in mind that providing node_modules as public folder is not good practice though, I recommend you to copy ifvisible.min.js to a seperate public folder.

这篇关于在angular 2中使用javascript库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！