在角度2

Question

假设我想在angular 2 app中使用以下库： https://github.com/serkanyersen/ifvisible.js

我需要做什么？

我尝试用：

更新我的SystemJS配置

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

还将此添加到我的index.html：

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

在我的组件中：

import * as ifvisible from 'ifvisible.js';

我得到error TS2307: Cannot find module 'ifvisible.js'.

怎么了？

Answer 1

从节点模块导入只能在给定其打字稿定义的情况下完成。幸运的是，invisible.js有一个。

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

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

并且还可以导入;

import ifvisible = require( 'ifvisible');

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

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

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

Answer 2

如果你使用angular-cli，你还必须将它添加到angular-cli-build.js，例如：

'ifvisible/**/*.+(js|js.map|d.ts)'

这会将文件从node-modules复制到dist文件夹。