Update to Angular v6 - Module not found: Error: Can't resolve 'fs'
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
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.
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
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.
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:
- run
npm i -D @angular-builders/custom-webpack
- edit your
angular.json
filearchitect.serve
andarchitect.build
to tell it to use thecustom-webpack
module to extend the virtual config with yourwebpack.config.js
file - Create your custom
webpack.config.js
- in this case it would look like this:
module.exports = {
node: {
fs: 'empty'
}
};
The accepted answer is correct; you can't use fs
anymore in Angular v6+.
However, this alternative builder (it's an extension to the Angular CLI) allows you to target an Electron environment and have full access to Electron's features:
https://github.com/angular-guru/electron-builder