Angular2 - 在SystemJS中导入第三方javascript [英] Angular2 - Importing 3rd party javascript in SystemJS

问题描述

由于某种原因，fileSaver没有被映射。 angular2-jwt工作正常。

我做了 npm install file-saver -save 来获取文件保护程序，然后如下引用它（我有一个将js文件移动到libs目录的g task任务，并且我在那里看到该文件）在index.html中，

已将脚本包含在src和system.config中

 < script src =libs / file-saver / FileSaver.js>< / script> 
 
 <！ -   -  2.配置SystemJS  - > 
< script> 
 System.config（{
 packages：{
 app：{
 format：'register'，
 defaultExtension：'js'
} 
 $，
 map：{
angular2-jwt：libs / angular2-jwt / angular2-jwt.js
，fileSaver：libs / file-saver / FileSaver .js
} 
}）; 
 System.import（'app / bootstrap'）
 .then（null，console.error.bind（console））; 
< / script> 
  

component.ts

这里是没有找到fileSaver

 从'fileSaver'导入{SaveAs}; 
  

我得到的错误是这个

 错误TS2307：无法找到模块'fileSaver'。 
  

有什么想法吗？

解决方案

在我的例子中，我使它像这样工作：

package.json ：

 dependencies：{
 // ...全部角度依赖性
文件保护程序：1.3.2
}，
  

index.html ：

 <！ - 所有角度依赖关系和其他第三方 -  - > 
< script src =node_modules / file-saver / FileSaver.js>< / script> 
  

typings.json ：

  //需要其他类型
filesaver：github：DefinitelyTyped / DefinitelyTyped / FileSaver / FileSaver.d.ts＃d21f1bd1fd079bbc18bc88ed71d2be7f5707e33a
  

使用情况：



  var blob = new Blob（[this.response]，{type：'application / zip'}）; 
 saveAs（blob，'project.zip'）; 
  

您需要先执行 npm install 运行它。

这就是它，希望它有帮助。




从'fileSaver'; 不允许完整的代码完成，但至少
有效
< blockquote>

fileSaver not getting mapped for some reason. angular2-jwt is working fine.

I did npm install file-saver -save to get file-saver then referenced it as follows (I have a gulp task to move the js file to libs directory and I see the file there)

in index.htmlI have included the script in src and system.config

    <script src="libs/file-saver/FileSaver.js"></script>

<!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          } 
        } ,
        map: {
          "angular2-jwt": "libs/angular2-jwt/angular2-jwt.js"
          ,"fileSaver":"libs/file-saver/FileSaver.js"
        }
      });
      System.import('app/bootstrap')
            .then(null, console.error.bind(console));
    </script>

component.ts

here it is not finding the fileSaver

import {SaveAs} from 'fileSaver';     

the error I get is this

 error TS2307: Cannot find module 'fileSaver'.   

Any idea what's wrong here ?

解决方案

In my case I made it work like this:

package.json:

"dependencies": {
    // ... all angular dependencies
    "file-saver": "1.3.2"
 },

index.html:

<!-- all angular dependencies and other 3rd party -->
<script src="node_modules/file-saver/FileSaver.js"></script>

typings.json:

// other typings needed
"filesaver": "github:DefinitelyTyped/DefinitelyTyped/FileSaver/FileSaver.d.ts#d21f1bd1fd079bbc18bc88ed71d2be7f5707e33a"

usage:

var blob = new Blob([this.response], {type: 'application/zip'});
saveAs(blob, 'project.zip');

You need to perform a npm install before running it.

That's it, hope it helps.

This won't let you import {SaveAs} from 'fileSaver'; nor have full code completion, but at least it works

这篇关于Angular2 - 在SystemJS中导入第三方javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！