Обновление до Angular v6 - модуль не найден: ошибка: не удается разрешить 'fs'

Question

Я пытаюсь перенести проект 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 Модуль не найден: ошибка: не удается разрешить 'fs' в '/ Users / мне / Документы / Проекты / MyProject / SRC / поставщиков / ядро ​​/ переводить'

В моем служении я заявляю fs как следующее:

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

Я также пытался объявить это следующим образом, но не помогло

import * as fs from 'fs';

Чтобы сказать webpack игнорировать fs, я попытался добавить следующее в webpack.server.config.js безуспешно

node: {
    fs: 'empty'
}

также пытался с плагином веб-пакета, не удалось ни

new webpack.IgnorePlugin(/fs/)

но на самом деле это может быть не использование конфигурации ng serve, но я не знаю, смогу ли я извлечь конфигурацию с v6?

у кого-нибудь есть идея?

UPDATE

Если я объявлю fs как any, это решит проблему для ng serve, но, к сожалению, он не будет работать на стороне сервера после npm run build:ssr и запустит npm run serve. На стороне сервера я столкнусь со следующей ошибкой

ОШИБКА ReferenceError: fs не определена

p.s .: мой проект следует https://github.com/angular/universal-starter структура, конфигурация и зависимости

Answer 1

Видимо advanced-json-path решает эту проблему в Angular 6 и далее, если кто-либо использует fs

Так что нужно сделать

npm i advanced-json-path --save-dev

так как это зависимость от dev (по крайней мере, в моем случае) на данный момент это версия 1.0.8 Тогда модуль 'fs' not found.

package.json
{
    ....
   "advanced-json-path": "^1.0.8",
}

В нашем приложении он избавился от ошибки модуля fs not found.

Answer 2

Я исправил это, добавив

"types": [
  "node"
]

в tsconfig.app.json

Answer 3

В качестве альтернативы В NativeScript File реализован как часть модуля файловой системы. Чтобы использовать его, вы должны импортировать его в свой код за файлом. например,

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.
    });

Answer 4

Принятый ответ правильный; вы больше не можете использовать fs в Angular v6 +.

Однако этот альтернативный компоновщик (это расширение для Angular CLI) позволяет вам ориентироваться на среду Electron и иметь полный доступ к функциям Electron:

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

Answer 5

Для тех, кто все еще ищет ответ, вот как мне удалось потребовать ('fs') в моем приложении angular 7. Или, если на то пошло, любой другой узел модуля.

Версия

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. Требуется фс

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']);
    }
  }
}

Примечание : операторы импорта в верхней части файла предназначены только для информации о типе. Значения переменных задаются с помощью узла require.

Для обновлений, отследите проблему здесь

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

Edit:

Оказывается, что если у вашего проекта есть зависимости, которые require 'fs', 'path', 'child_process' и т. Д. Угловой компилятор не может скомпилировать код. Чтобы обойти это, как кто-то уже предложил, добавьте (window as any).global = window; в ваши polyfills.ts.

В моем случае у меня были chokidar , node-pty и электрон в качестве зависимости. Этот рабочий для меня.

Answer 6

Хорошо, после нескольких часов я прихожу к выводу с ответами, которые я собрал, что реальный ответ:

Вы больше не можете использовать fs в Angular v6

Кроме того, поскольку больше невозможно извлечь конфигурацию веб-пакета, нет способа заставить веб-пакет игнорировать требование fs

По этой теме существует открытый вопрос: https://github.com/angular/angular-cli/issues/10681

P.S .: Я использовал fs для загрузки переводов на стороне сервера, я преодолел проблему, выполнив следующее решение @xuhcc, см. https://github.com/ngx-translate/core/issues/754

Обновление 2019

Смотрите комментарий, согласно @Tahlil, теперь это возможно. Я не пробовал.

Answer 7

Вы можете объявить fs также, выполнив это declare var fs: any;