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? I created an initial, minimal project with angular cli, installed file-saver and tried the following, both didn't worked.
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
ERROR in C:/Users/*/Desktop/ng-cli-playground/src/app/app.component.ts (2,22): Cannot find module 'file-saver'.)
my cli config
{
"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. Anyway I find it's really hard to understand how all the building-, loading- and bundling-tools work. Thanks a lot in advance!