Load regular npm packages into webpack/angular cli [cannot find module]

Question

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!

Answer 1

It seems to be looking at your src folder from this error:

C:\Users*\Desktop\ng-cli-playground\src\node_modules\file-saver\FileSaver.js

Try:

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