Closed Geoffrey0 closed 2 years ago
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!
@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!
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:
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.
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!
@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.
@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
It downloaded @angular-architects/module-federation
12.5.0 and not 12.5.3 🤦♂️
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.
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
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
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