Module fedaration with shared libs and building

[Geoffrey0]

I am currently facing an error when building my mfe host and remote setup with sharing of libraries. I have tried swapping out the builder to use the "ngx-build-plus:browser", which seems to work. Serving both host and remote seems to work.

Current Behavior

When building a mfe host or remote with sharing of libs, it fails

Expected Behavior

The mfe host and remote can build using the nrwl angular builders

Steps to Reproduce

https://github.com/Geoffrey0/nx-microfrontends

• npm install
• npm run build -- --project=shell or npm run build -- --project=mfe1

Failure Logs

./libs/shared/src/index.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: .../nx-microfrontends/libs/shared/src/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. at .../nx-microfrontends/node_modules/@ngtools/webpack/src/ivy/loader.js:59:26

Environment

NX Report complete - copy this into the issue template

Node : 14.17.5 OS : darwin x64 npm : 6.14.14

nx : Not Found @nrwl/angular : 12.8.0 @nrwl/cli : 12.8.0 @nrwl/cypress : 12.8.0 @nrwl/devkit : 12.8.0 @nrwl/eslint-plugin-nx : 12.8.0 @nrwl/express : Not Found @nrwl/jest : 12.8.0 @nrwl/linter : 12.8.0 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/nx-cloud : Not Found @nrwl/react : Not Found @nrwl/schematics : Not Found @nrwl/tao : 12.8.0 @nrwl/web : Not Found @nrwl/workspace : 12.8.0 @nrwl/storybook : 12.8.0 @nrwl/gatsby : Not Found typescript : 4.3.5

[gerardcastell]

I have faced the same issue, the problem is when the libs are buildable as far as I know, if the libs are not buildable like the example provided by @Coly010 in. the nrwl web it does not happen. If you need a repository to reproduce it let me know! This feature is currently blocking my team to update the architecture to microfrontends so any help will be welcome! Thank you in advance!

[Coly010]

@gerardcastell You're absolutely right, it is related to buildable libs and that's because buildable libs require a new tsconfig.json file that contains the correct mappings to the dist folder.

This new tsconfig.generated.json is created correctly by the @nrwl/angular:webpack-browser builder, but the webpack.config.json file still points to tsconfig.base.json at the root of the workspace, where the mappings for those built libraries are incorrect.

It's straightforward enough to swap the path of the correct tsconfig file over within the webpack.config.json but the SharedMappings plugin has a piece of logic that will then incorrectly find the rootPath of the repo meaning webpack will never find the built libraries' source files.

We have a plan for a solution and we're working on it!

[Coly010]

We will cut a release soon that includes the fix to this issue. The fix will work for all future generated host and remote MFE Angular Apps.

To manually fix the current broken webpack.config.js config files when this is released, please follow the steps below:

1. Below const fs = require('fs'); add:

   
   const tsConfigPath =
   process.env.NX_TSCONFIG_PATH ??
   path.join(__dirname, '../../tsconfig.base.json');

const workspaceRootPath = path.join(__dirname, '../../');

2. Find the section:
```js
sharedMappings.register(path.join(__dirname, '../../tsconfig.base.json'), [
  '@nx-microfrontends/shared',
]);

and replace it with:

sharedMappings.register(
  tsConfigPath,
  ['@nx-microfrontends/shared'],
  workspaceRootPath
);

N.B. This fix will not work until the next version of Nx is released.
I will reply to this issue when that happens.

[Coly010]

Nx 12.10.0 has been released and it includes this fix. If you upgrade and follow the steps above, you should be good to go!

[TomONeill]

@Coly010 Neat! We've been trying to get it working but somehow it gives us the following error. Hopefully you could help us out!

Error: Module not found: Error: Can't resolve '@company/domain/data-access' in 'C:\Git\<PROJECT_ROOT>\apps\shell\src\app'

I logged the result of process.env.NX_TSCONFIG_PATH, which is the following: <PROJECT_ROOT>\tmp\apps\shell\tsconfig.generated.json

{
  "compilerOptions": {
    "paths": {
      "@company/domain/data-access": [
        "dist/libs/domain/data-access"
      ],
      "@company/shared/utils/xx-state": [
        "libs/shared/utils/xx-state/src/index.ts"
      ]
    }
  },
  "extends": "..\\..\\..\\apps\\shell\\tsconfig.app.json"
}

I believe the problem sits in that the value in the data-access array doesn't point to the index.ts file. I can't figure out as to why that is different between the two (earlier generated but fixed with the steps in your comment above) libs. When I generate a new lib, it doesn't point to index.ts either.

[smasala]

@Coly010 even with your fix above... it's still happening for me with buildable libs - or exposing a module from a buildable lib.

"@angular-architects/module-federation": "12.5.0",
"@angular/common": "12.2.12",
"@nrwl/angular": "13.1.4",

Shared lib which is buildable (@my-org/a-buildable-child-lib)

Error: Module not found: Error: Can't resolve '@my-org/a-buildable-child-lib' in '/Users/xxxxx/git/my-org/dist/libs/a-buildable-parent-lib/esm2015/lib'

Structure looks like:

-- my app
    | -- level 1 lib (parent)
        | -- level 2 shared lib (child)           <---- share this lib

If you add all the libs as shared libs then you get a similar error but on app level

Error: Module not found: Error: Can't resolve '@my-org/a-buildable-level-1-lib' in '/Users/xxxxx/git/my-org/apps/my-app/src/app'

Exposed Module from a buildable lib

./libs/my-shared-lib/src/index.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: /Users/bob/git/mynxrepo/libs/my-shared-lib/src/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at /Users/bob/git/mynxrepo/node_modules/@ngtools/webpack/src/ivy/loader.js:59:26

[smasala]

It downloaded @angular-architects/module-federation 12.5.0 and not 12.5.3 🤦‍♂️

[github-actions[bot]]

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.