My current setup is Angular 6.1.0 with Angular Universal too but the project is based on an old (dead) project which was built on Angular 5. Upon building the server side assets, the builder throws a lot of error saying it cannot resolve crypto, or it cannot resolve fs, net, path, stream and some others. I just did a quick and dirty fix for now.
Update
The temporary solution is so annoying that I gave up and use the semi-permanent solution until Angular or Webpack applies some fix to this. See update at the bottom.
Overview
The error is thrown by the Webpack compiler script. Note that the missing modules are built-in node modules. The issue has been reported all over the Angular and Webpack Github issues but they seem to be confused on who needs to fix it, therefore, I just followed the quick and dirty fix I’ve found on one of the comments from Github.
Annoying Fix
The issue is that the Webpack config generated in this Angular project configured node to have the modules not loaded. Therefore, the fix is to modify the parameters to include these missing modules.
On every update of your node packages, edit this file:
node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js
Find the node key parameter and change the value from:
node: false
to:
node: { crypto: true, stream: true, fs: 'empty', net: 'empty' }
Note that if you upgrade your packages, most likely, you have to repeat this process again. You can build an automated script but I’ll do it manually for now.
Auto update Webpack config on every package install/update
The automated script to patch the Webpack config is based on these Github comments and Gist:
Github Gist where the script is based upon.
My tweak is simply to change the path since the comments above are a bit outdated.
Update package.json and add this line into the scripts section.
"scripts": {
...
"postinstall": "node patch-webpack.js"
...
}
Then create the patch script patch-webpack.js
const fs = require('fs');
const f = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';
fs.readFile(f, 'utf8', function (err,data) {
if (err) {
return console.log(err);
}
let result = data.replace(/node: false/g, "node: {crypto: true, stream: true, fs: 'empty', net: 'empty'}");
fs.writeFile(f, result, 'utf8', function (err) {
if (err) return console.log(err);
});
});
That’s it! This is way better!
Thank you – I have been searching the web for hours to resolve the above errors, your solution works like a charm.
This works great. I also had “No browser version for node.js core module tls available”, so adding
tls: ’empty’
to the node field did the trick.
also i have error when i give dependency injection in constructor
Uncaught TypeError: Cannot read property ‘prototype’ of undefined
at Object. (response.js:42)
at Object../node_modules/express/lib/response.js (response.js:1137)
at __webpack_require__ (bootstrap:81)
at Object../node_modules/express/lib/express.js (express.js:22)
at __webpack_require__ (bootstrap:81)
at Object../node_modules/express/index.js (index.js:11)
at __webpack_require__ (bootstrap:81)
at Object../src/app/not-found/not-found.component.ts (main.js:678)
at __webpack_require__ (bootstrap:81)
at Object../src/app/app-routing.module.ts (main.js:191)
This error appears when i add private platformId: Object,
private appId: string,
private response: Response,
private titleService: Title in constructor
@Divyansh not sure what went wrong with your setup, I have this in my page using Angular 7.2.1.
Note that I am using Angular universal.
constructor( private titleService: Title, @Inject(PLATFORM_ID) private platformId: Object, @Inject(APP_ID) private appId: string ) { this.titleService.setTitle('Sample title'); }Maybe you are missing the @Inject part?
Why `fs: ’empty’`?
I tried and fs seem to be null
I am trying it but facing the same error while “ng serve”.
Thanks a lot
I also tried but still it is giving
Module not found: Error: Can’t resolve ‘fs’ in ‘C:\Users\Reeba\Documents\Reace\client\node_modules\mime’
ERROR in ./node_modules/send/index.js
Module not found: Error: Can’t resolve ‘fs’ in ‘C:\Users\Reeba\Documents\Reace\client\node_modules\send’
ERROR in ./node_modules/express/lib/request.js
Module not found: Error: Can’t resolve ‘net’ in ‘C:\Users\Reeba\Documents\Reace\client\node_modules\express\lib’
@lyappan – what Angular version are you using? If you are using the latest, I think this issue has been fixed already.
Seems like the browser.js file has moved in Angular 11
to node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js