Обновление 2020

См. ответ Marc для Angular v9.

Обновление 2019

См. Комментарий, согласно @Tahlil, теперь это возможно. Это работает для Angular v8 (компилятор Ivy). см. Этот ответ. Он устанавливает для определенных модулей значение false для использования в браузере в package.json.

Исходный ответ

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

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

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

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

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

Поскольку предыдущие ответы довольно старые, можно выделить здесь, что обходной путь для Angular9 - просто добавить следующее в ваш package.json:

"browser": {
    "fs": false,
    "os": false,
    "path": false
  }

У меня это очень хорошо работает. Для справки, я нашел это решение на официальной странице tenorflow / tfjs Github здесь.

Для тех, кто все еще ищет ответ, вот как мне удалось потребовать ('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

Редактировать:

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

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

В Angular 8 теперь вы можете использовать Angular Builders, чтобы указать web.config.js, который расширяет виртуальную конфигурацию, созданную Angular.

В этом блоге это довольно хорошо объясняется.

tldr:

1. запустить npm i -D @angular-builders/custom-webpack
2. отредактируйте свой angular.json файл architect.serve и architect.build, чтобы он использовал модуль custom-webpack для расширения виртуальной конфигурации вашим webpack.config.js файлом
3. Создайте свой собственный webpack.config.js - в этом случае он будет выглядеть так:

module.exports = {
    node: {
        fs: 'empty'
      }
};

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

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

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

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

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

"types": [
  "node"
]

в tsconfig.app.json

В качестве альтернативы In 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.
    });

Я запускаю приложение Angular в монорепозитории Angular CLI, настроенное с помощью схем Nx. Я делюсь кодом из каталога библиотеки.

При попытке использовать Typescript Enum из общей библиотеки внутри приложения Angular я получил:

Критическая зависимость: запрос зависимости - это выражение

Не могу разрешить "fs"

Включенный стек ошибок:

• type-graphql, в частности loadResolversFromGlob
• glob
• fs.realpath

Это было странно, потому что на первый взгляд включение Enum не имело ничего общего с type-graphql.

Проблема оказалась связана с тем, что схемы type-graphql и перечисления Typescript были определены в одной и той же библиотеке. Извлечение перечислений в их собственную библиотеку решило проблему. Я не понимаю, почему произошла ошибка, но в любом случае решение сработало.

ИЗМЕНИТЬ

Итак, проблема заключалась в том, что согласно этой проблеме nx и эта проблема type-graphql, в какой-то момент, включая материал из библиотеки с TypeGraphQL, пытается объединить все ВведитеGraphQL в приложение браузера (декоратор @Input() кажется еще одним таким триггером).

Решение, если вы хотите включить классы TypeGraphQL в интерфейс, состоит в том, чтобы обновить конфигурацию веб-пакета . Это делается в приложении AngularCLI. включает несколько шагов.

Если вы импортировали жасмин в свой файл спецификаций, чтобы избежать ошибки tslint, вам следует сделать следующее:

1. Удалите import jasmine; из файла спецификации.
2. Добавить jasmine в tsconfig.json

...
...
"compilerOptions": {
  ...
  ...
  "types": [
      "webpack-env",
      "jasmine"
  ]
  ...
  ...
}
...
...

добавьте строки ниже в свой package.json

1. браузер: {fs: false, os: false, path: false}

Щелкните здесь, чтобы просмотреть образец изображения

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

Итак, нужно сделать

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

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

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

В нашем приложении это избавилось от ошибки Module 'fs' not found.