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

Posted 2023-03-13

【中文标题】将常规 npm 包加载到 webpack/angular cli [找不到模块]

【英文标题】：Load regular npm packages into webpack/angular cli [cannot find module]

【发布时间】：2017-07-23 13:06:57

【问题描述】：

亲爱的互联网人，你好，

如何让 Angular CLI (@angular/cli) 找到像“file-saver”这样的“常规 npm 包”，以便我可以使用例如那里提供的 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:\Users*\Desktop\ng-cli-playground\src\node_modules\file-saver\FileSaver.js' 在 'C:\Users*\Desktop\ng-cli-playground' @ multi 脚本加载器！./src/~/file-saver/FileSaver.js

错误 C:/Users/*/Desktop/ng-cli-playground/src/app/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】：

它似乎正在从这个错误中查看您的src 文件夹：

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

试试：

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