Shared api-interface between nest and angular : Error: Can't resolve 'fs' in

[jogelin]

Context

I am using NestJS with graphql integration (code first) and I am sharing the models with an Angular app using the api-interface lib. I meet multiple issues in the frontend compilation because it is also sharing imports : graphql-type, nest, class-validator..

Expected Behavior

It compile without issue and don't event take in account imports because I don't want the frontend to load library used by the api

Current Behavior

Same issue as MichalLytek/type-graphql#100

Other

I think this webpack configuration should be included by Nx https://typegraphql.ml/docs/browser-usage.html#using-classes-in-client-app

[Jordan-Hall]

Hi @jogelin

Can you provide an example of the code you are using. It appears to be strange that you require nest as part of API interface. Furthermore, api-interface (the generated lib) should really be for interface. If you want share models that's fine class-validator work but the issue is relating to graphql-type as it requires a webpack plugin.

new webpack.NormalModuleReplacementPlugin(/type-graphql$/, resource => {
    resource.request = resource.request.replace(/type-graphql/, "type-graphql/dist/browser-shim");
 }),

I can't see this being NX wanting to add this as part of the NX packages as it's a custom for type-graphql package which not everyone will use.

As for your expected behaviour this is out of scope of NX as this is TypeScript role to compile the code. The issue is you should be using the type-graphql as part of your share library if you don't want the code to be included/

However, if you do need the package to be included you can fix the build yourself, but you will need to do the following steps.
Note: using this you will need to ensure you are using angular default build. You are not able to use jest. You will need to use karma

1. npm i @angular-builders/custom-webpack ---save-dev

2. Edit angular.json changing builder to use @angular-builders/custom-webpack:[browser|server|karma|dev-server]"

location front-end project

Change:

...
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
             ....
          }
...

To:

...
"architect": {
        "build": {
         "builder": "@angular-builders/custom-webpack:browser"
          "options": {
             "customWebpackConfig": {
                "path": "apps/[project-name]/extra-webpack.config.js",
                "mergeStrategies": { "externals": "replace" }
             }
             ....
          }
...

3: inside the your front end application create extra-webpack.config.js

const webpack = require('webpack');
const pkg = require('./package.json');
 
module.exports = (config, options) => {
  config.plugins.push(
    new webpack.NormalModuleReplacementPlugin(/type-graphql$/, resource => {
       resource.request = resource.request.replace(/type-graphql/, "type-graphql/dist/browser-shim");
    }),
  );
 
  return config;
};

This should resolve your issues. I've not tested this out as I don't require changes to webpack for any of my projects but this should work.

Please note i do believe you are using the share library wrong. If your front-end doesn't require the code it should be included in the package. If you share the source code I'll take a look and advise you and on issues.

[vsavkin]

I'm going to close this one, folks.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.