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

I am running an Angular app inside an Angular CLI monorepo, set up with the help of Nx schematics. I’m sharing code from a lib directory.

When trying to use a Typescript Enum from a shared lib inside the Angular app I got:

Critical dependency: the request of a dependency is an expression

Can't resolve 'fs'

The error stack involved:

• type-graphql, specifically loadResolversFromGlob
• glob
• fs.realpath

It was strange because on the face of if the inclusion of the Enum had nothing to do with type-graphql.

The issue turned out to be related to the fact that type-graphql schemas and Typescript Enums were defined in the same lib. Extracting the Enums into their own lib solved the problem. I’m not clear on why the error happened, but in any case the solution worked.

EDIT

So the problem was that per this nx issue, and this type-graphql issue, at a certain point including stuff from a lib with TypeGraphQL ends up trying to bundle whole TypeGraphQL into the browser app (the @Input() decorator seems to be another such trigger).

The solution, if you want to include TypeGraphQL classes in the frontend, is to update the webpack config. Doing this is in an AngularCLI app involves quite a few steps.

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

Answer 3

I fixed this by adding

"types": [
  "node"
]

in tsconfig.app.json

Answer 4

You can declare the fs also by doing this declare var fs: any;

Answer 5

add below lines in your package.json

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

Click here to see sample image

Answer 6

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