将常规npm包加载到webpack / angular cli中[找不到模块]

时间:2017-03-03 12:11:30

标签: angular webpack angular-cli

亲爱的互联网用户,您好

如何让Angular CLI(@angular/cli)找到“常规npm包”,比如“file-saver”,以便我可以使用例如saveAs() - 在那里提供的功能?我使用angular cli创建了一个初始的最小项目,安装了文件保护程序并尝试了以下操作,两者都没有用。

import {Component, OnInit} from '@angular/core';
import {saveAs} from 'file-saver';
//import saveAs from 'file-saver'; didn't worked as well

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
        saveAs("file.txt", new Blob());
    }

    title = 'app works!';
}
  

多脚本加载器中的错误!./ src /〜/ file-saver / FileSaver.js模块   找不到:错误:无法解决   'C:\用户* \桌面\ NG-CLI-操场的\ src \ node_modules \文件保护程序\ FileSaver.js'   在'C:\ Users * \ Desktop \ ng-cli-playground'@ multi   脚本装载机!./ SRC /〜/文件节省/ FileSaver.js

     

错误   C:/用户/ * /桌面/ NG-CLI-操场/ src目录/应用/ app.component.ts   (2,22):找不到模块'文件保护程序'。)

我的cli配置

{
    "project": {
        "version": "1.0.0-beta.26",
        "name": "ng-cli-test"
    },
    "apps": [
        {
            "root": "src",
            "outDir": "dist",
            "assets": [
                "assets",
                "favicon.ico"
            ],
            "index": "index.html",
            "main": "main.ts",
            "test": "test.ts",
            "tsconfig": "tsconfig.json",
            "prefix": "app",
            "mobile": false,
            "scripts": [
                "node_modules/file-saver/FileSaver.js"
            ],
            "environments": {
                "source": "environments/environment.ts",
                "dev": "environments/environment.ts",
                "prod": "environments/environment.prod.ts"
            }
        }
    ],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "webpack": {
        "development": {
            "config": "config/webpack.dev.conf.js"
        },
        "defaults": {
            "styleExt": "css",
            "prefixInterfaces": false,
            "inline": {
                "style": false,
                "template": false
            },
            "spec": {
                "class": false,
                "component": true,
                "directive": true,
                "module": false,
                "pipe": true,
                "service": true
            }
        }
    }
}
PS:我正在使用angular2编程7个月,但我曾经使用systemJS进行编程。无论如何,我发现很难理解所有构建,加载和捆绑工具是如何工作的。非常感谢提前!

1 个答案:

答案 0 :(得分:1)

似乎是在查看此错误的src文件夹:

  

C:\用户* \桌面\ NG-CLI-操场\ SRC \ node_modules \文件节省\ FileSaver.js

尝试:

"scripts": [
     "../node_modules/file-saver/FileSaver.js"
      ]