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. Everything works well with Angular v5.

With Angular v6, when I run npm run start aka ng serve --proxy-config proxy.conf.json I face the following error

ERROR in ./src/providers/core/translate/translate-universal-loader.service.ts Module not found: Error: Can't resolve 'fs' in '/Users/me/Documents/projects/myproject/src/providers/core/translate'

In my service I declare fs like the following:

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

I also tried to declare it like following, but didn't help

import * as fs from 'fs'; 

To tell webpack to ignore fs I tried to add the following in my webpack.server.config.js without success

node: {     fs: 'empty' } 

also tried with a webpack plugin, wasn't successful neither

new webpack.IgnorePlugin(/fs/) 

but actually it's maybe not the config use by ng serve but I don't know if I could still eject the configuration with v6?

anyone has got an idea?

UPDATE

If I declare fs as any it solves the problem for ng serve but unfortunately it will not work on the server side after npm run build:ssr and run npm run serve. On the server side I will then face the following error

ERROR ReferenceError: fs is not defined

p.s.: my project follows https://github.com/angular/universal-starter structure, config and dependencies

Answer 1

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 2

Update 2020

See answer of Marc for Angular v9.

Update 2019

See comment, according @Tahlil it is now possible. This works for Angular v8 (Ivy compiler) see this answer. It sets specific modules to false for use in the browser in package.json.

Original answer

Ok after hours I come to the conclusion with the answers I gathered that the real answer is:

You can't use fs anymore in Angular v6

Furthermore, since it's not possible anymore to eject the webpack configuration, there is no way to tell webpack to ignore the fs require

There is an open issue about this subject: https://github.com/angular/angular-cli/issues/10681

P.S.: I was using fs to load the translations on the server side, I overcome the problem by following solution of @xuhcc, see https://github.com/ngx-translate/core/issues/754