Update to Angular v6 - Module not found: Error: Can't resolve 'fs'

Question

I\'m trying to migrate my Angular Universal project from Angular v5 to v6

I\'ve got a service where I use fs to load the translation on the server side.

Answer 1

Alternatively In NativeScript File is implemented as part of the file system module. To use it you have to import it in your code behind file. e.g.

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 2

If you have imported jasmine in your spec file to avoid tslint error, you should to following:

1. Remove import jasmine; from spec file.
2. Add jasmine in tsconfig.json

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

Answer 3

For anyone still looking for an answer, here's how I managed to require('fs') in my angular 7 app. Or for that matter, any other node module.

Versions

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. Install @types/node

npm install --save-dev @types/node

2. Modify tsconfig.json

Take note of "allowSyntheticDefaultImports" flag. It must be set to 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. Require 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: The import statements at the top of the file are just to provide for type information. The variable values are set using node require.

For updates, Track the issue here

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

Edit:

Turns out, that if your project has dependencies that require 'fs', 'path', 'child_process' etc. The angular compiler fails to compile the code. To get around this, as someone has already suggested, add (window as any).global = window; to your polyfills.ts.

In my case, I had chokidar, node-pty and electron as a dependency. This worker for me.

Answer 4

Apparently advanced-json-path resolves this issue in Angular 6 onwards if anyone is using fs

So one has to do an

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

as it is a dev dependency (at least in my case) as of this message instance, it is version 1.0.8 Then the Module 'fs' not found doesn't occur.

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

In our application it got rid of the Module 'fs' not found error.

Answer 5

Since previous answers are quite old, it might help to highlight here that a workaround for Angular9 is just to add the following in your package.json:

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

This works very well for me. For reference, I found this solution on the official tensorflow/tfjs Github page here.

Answer 6

In Angular 8, you can now use Angular Builders to specify a web.config.js which extends the virtual config produced by Angular.

This blogpost explains it quite well.

tldr:

1. run npm i -D @angular-builders/custom-webpack
2. edit your angular.json file architect.serve and architect.build to tell it to use the custom-webpack module to extend the virtual config with your webpack.config.js file
3. Create your custom webpack.config.js - in this case it would look like this:

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