首页 文章

更新到Angular v6 - 找不到模块:错误:可以't resolve ' fs'

提问于
浏览
4

我正在尝试将Angular Universal项目从Angular v5迁移到v6

我有一个服务,我使用 fs 加载服务器端的翻译 . 一切都适用于Angular v5 .

使用Angular v6,当我运行 npm run start 又名 ng serve --proxy-config proxy.conf.json 时,我遇到以下错误

./src/providers/core/translate/translate-universal-loader.service.ts中的错误找不到模块:错误:无法解析'/ Users / me / Documents / projects / myproject / src /中的'fs'供应商/核心/翻译”

在我的服务中,我声明 fs 如下:

declare var require: any;
const fs = require('fs');

我也试图宣布它像跟随,但没有帮助

import * as fs from 'fs';

告诉webpack忽略fs我试图在我的 webpack.server.config.js 中添加以下内容但没有成功

node: {
    fs: 'empty'
}

还尝试了一个webpack插件,但也没有成功

new webpack.IgnorePlugin(/fs/)

但实际上它可能不是 ng serve 的配置使用,但我不知道我是否还能用v6弹出配置?

有谁有想法?

UPDATE

如果我将fs声明为 any 它解决了 ng serve 的问题,但不幸的是它在 npm run build:ssr 之后无法在服务器端运行并运行 npm run serve . 在服务器端,我将面临以下错误

ERROR ReferenceError:未定义fs

p.s . :我的项目遵循https://github.com/angular/universal-starter结构,配置和依赖项

5 回答

  • 1

    好几个小时后,我得出了我收集到的答案的结论,真正的答案是:

    你不能再在Angular v6中使用 fs

    此外,由于不可能再弹出webpack配置,因此无法告诉webpack忽略fs要求

    有关此主题的公开问题:https://github.com/angular/angular-cli/issues/10681

    P.S . :我使用fs在服务器端加载翻译,我通过遵循@xuhcc的解决方案克服了这个问题,请参阅https://github.com/ngx-translate/core/issues/754

  • 7

    您也可以通过这样做 declare var fs: any; 来声明 fs

  • 1

    接受的答案是正确的;你不能再在Angular v6中使用 fs 了 .

    但是,这个替代构建器(它是Angular CLI的扩展)允许您定位Electron环境并完全访问Electron的功能:

    https://github.com/angular-guru/electron-builder

  • 0

    对于仍在寻找答案的人来说,这就是我在angular 7 app中设法要求('fs')的方法 . 或者就此而言,任何其他节点模块 .

    版本

    Angular CLI: 7.0.4
    Node: 10.13.0
    OS: win32 x64
    "@angular/animations": "~7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.4",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "electron": "^3.0.7",
    "typescript": "~3.1.1"
    

    1.安装@ types / node

    npm install --save-dev @types/node

    2.修改tsconfig.json

    记下“allowSyntheticDefaultImports”标志 . 必须设置为true .

    {
      "compileOnSave": false,
      "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "es2015",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "types": [
          "node"
        ],
        "typeRoots": [
          "node_modules/@types"
        ],
        "lib": [
          "es2018",
          "dom"
        ],
        "strict": false
      }
    }
    

    3.需要fs

    import { Component } from '@angular/core';
    import { } from 'electron';
    import Fs from 'fs';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
    
      constructor() {
        //check if platform is electron
        let isElectron: boolean = window && window['process'] && window['process'].type;
    
        if (isElectron) {
          let fs: typeof Fs = window['require']('fs');
          let app: Electron.App = window['require']('electron').remote;
          console.log(fs, app, window['process']);
        }
      }
    }
    

    Note :文件顶部的import语句只是为了提供类型信息 . 使用节点 require 设置变量值 .

    有关更新,请在此处跟踪问题

    https://github.com/angular/angular-cli/issues/9827

    编辑:

    事实证明,如果您的项目具有依赖性 require 'fs', 'path', 'child_process' 等 . 角度编译器无法编译代码 . 为了解决这个问题,正如某人已经建议的那样,将 (window as any).global = window; 添加到您的polyfills.ts中 .

    就我而言,我有chokidarnode-ptyelectron作为依赖 . 这个 Worker 对我来说 .

  • 1

    或者在NativeScript中,文件作为文件系统模块的一部分实现 . 要使用它,您必须在代码隐藏文件中导入它 . 例如

    import * as fs from "file-system';
    
    var documents = fs.knownFolders.documents();
    var path = fs.path.join(documents.path, "FileFromPath.txt");
    var file = fs.File.fromPath(path);
    
    // Writing text to the file.
    file.writeText("Something")
        .then(function () {
            // Succeeded writing to the file.
        }, function (error) {
            // Failed to write to the file.
        });
    

相关问题