[英]Load regular npm packages into webpack/angular cli [cannot find module]
Hello dear people of the internet, 各位网友大家好,
How can I make Angular CLI ( @angular/cli ) find "regular npm packages" like "file-saver" so that I can use for example the saveAs()-function provided there? 如何使Angular CLI( @ angular / cli )查找“常规npm软件包”(如“文件保护程序”),以便使用例如其中提供的saveAs()函数? I created an initial, minimal project with angular cli, installed file-saver and tried the following, both didn't worked.
我用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!';
}
ERROR in multi script-loader!./src/~/file-saver/FileSaver.js Module not found: Error: Can't resolve 'C:\\Users*\\Desktop\\ng-cli-playground\\src\\node_modules\\file-saver\\FileSaver.js' in 'C:\\Users*\\Desktop\\ng-cli-playground' @ multi script-loader!./src/~/file-saver/FileSaver.js
在多脚本加载器中出错!/src/~/file-saver/FileSaver.js找不到模块:错误:无法解析'C:\\ Users * \\ Desktop \\ ng-cli-playground \\ src \\ node_modules \\ file -saver \\ FileSaver.js在'C:\\ Users * \\ Desktop \\ ng-cli-playground'@多脚本加载器!./ src /〜/ file-saver / FileSaver.js
ERROR in C:/Users/*/Desktop/ng-cli-playground/src/app/app.component.ts (2,22): Cannot find module 'file-saver'.)
C:/ Users / * / Desktop / ng-cli-playground / src / app / app.component.ts(2,22)中的错误:找不到模块“文件保存器”。)
my cli config 我的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: I'm programming with angular2 for 7 months now but I used to do it with systemJS. PS:我现在用angular2编程了7个月,但是我以前是用systemJS来做的。 Anyway I find it's really hard to understand how all the building-, loading- and bundling-tools work.
无论如何,我发现很难理解所有的构建,加载和捆绑工具是如何工作的。 Thanks a lot in advance!
在此先多谢!
It seems to be looking at your src
folder from this error: 似乎正在从此错误查看您的
src
文件夹:
C:\\Users*\\Desktop\\ng-cli-playground\\src\\node_modules\\file-saver\\FileSaver.js
C:\\ Users * \\ Desktop \\ ng-cli-playground \\ src \\ node_modules \\ file-saver \\ FileSaver.js
Try: 尝试:
"scripts": [
"../node_modules/file-saver/FileSaver.js"
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.