Create basic nx-workspace fail to load rxjs module after add microfrontend app

[yoan-asdrubal]

Current Behavior

I create default workspaces, add angular material lib, add shared lib to shared material modules across apps . Until this step all is good, If I run npx nx serve-shell my-app-shell every run ok, also sharing material libs . If I create microfronted app, add "scriptType: 'text/javascript" to module.export output to avoid issue with live-reload mfe apps, my apps broken if I tried to load microfrontend app, but fails loading module of my shell app.

After some test, I change micronfronted app import modules, to see it deployed after serve apps, and its works, I can see micronfronted app deployed after run npx nx serve-mfe my-app-shell, also my-app-shell works ok, but if I try to load remoteEntry endpoint, its broken.

Expected Behavior

Load micronfronted app successfull with default configuration

Steps to Reproduce

Create App I create app and add angular material with the next steps . 1- npx create-nx-workspace workspacename 2- cd workspacename 3- npm i -D @nrwl/angular 4- nx g @nrwl/angular:application --mfe --mfeType=host --routing 5- npm install @angular/material @angular/cdk @angular/flex-layout --save

Add Angular Material 1- nx g @angular-architects/module-federation:boot-async false --project=app-name 2- Search project.json under targets -> build -> executor and change ""@nrwl/angular:webpack-browser" for "@angular-devkit/build-angular:browser" 3- npx nx g @angular/material:ng-add --project=app-name 4- Revert step 2 5- nx g @angular-architects/module-federation:boot-async true --project=app-name

Create App 1- npx nx g @nrwl/angular:app --mfe --mfeType=remote --port=4201 --host=app-shell-name --routing=true 2- Add " scriptType: 'text/javascript' " to module.export output in my new app to avoid live-reload issue

Run npx nx serve-shell my-app-sell

Failure Logs

Failed to load resource: the server responded with a status of 404 (Not Found) core.mjs:6484 ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk default-node_modules_rxjs_dist_esm_internal_BehaviorSubject_js-node_modules_rxjs_dist_esm_int-e7ff8c failed. (error: http://localhost:4200/default-node_modules_rxjs_dist_esm_internal_BehaviorSubject_js-node_modules_rxjs_dist_esm_int-e7ff8c.js) while loading "./Module" from 8157 ChunkLoadError: Loading chunk default-node_modules_rxjs_dist_esm_internal_BehaviorSubject_js-node_modules_rxjs_dist_esm_int-e7ff8c failed. (error: http://localhost:4200/default-node_modules_rxjs_dist_esm_internal_BehaviorSubject_js-node_modules_rxjs_dist_esm_int-e7ff8c.js) at Object.webpack_require.f.j (:4201/remoteEntry.js:4812) at :4201/remoteEntry.js:4388 at Array.reduce () at Function.webpack_require.e (:4201/remoteEntry.js:4387) at Object../Module (:4201/remoteEntry.js:4289) at get (:4201/remoteEntry.js:4296) at handleFunction (:4200/main.js:303) at onInitialized (:4200/main.js:315) at handleFunction (:4200/main.js:308) at onExternal (:4200/main.js:314) at resolvePromise (:4200/polyfills.js:5560) at resolvePromise (:4200/polyfills.js:5514) at :4200/polyfills.js:5626 at ZoneDelegate.invokeTask (:4200/polyfills.js:4753) at Object.onInvokeTask (:4200/default-node_modules_angular_core_fesm2020_core_mjs.js:29908) at ZoneDelegate.invokeTask (:4200/polyfills.js:4752) at Zone.runTask (:4200/polyfills.js:4525) at drainMicroTaskQueue (:4200/polyfills.js:4929) at ZoneTask.invokeTask [as invoke] (:4200/polyfills.js:4838) at invokeTask (:4200/polyfills.js:5947) defaultErrorLogger @ core.mjs:6484 default-webpack_sharing_consume_default_angular_core_angular_core-webpack_sharing_consume_def-7d0235.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) apps_test-app_src_app_remote-entry_entry_module_ts.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Environment

Libs { "name": "app-frontend", "version": "0.0.0", "license": "MIT", "scripts": { "start": "nx serve", "build": "nx build", "test": "nx test", "postinstall": "ngcc --properties es2015 browser module main" }, "private": true, "dependencies": { "@angular-architects/module-federation": "^13.0.1", "@angular/animations": "^13.0.0", "@angular/cdk": "^13.1.0", "@angular/common": "^13.0.0", "@angular/compiler": "^13.0.0", "@angular/core": "^13.0.0", "@angular/flex-layout": "^13.0.0-beta.36", "@angular/forms": "^13.0.0", "@angular/material": "^13.1.0", "@angular/platform-browser": "^13.0.0", "@angular/platform-browser-dynamic": "^13.0.0", "@angular/router": "^13.0.0", "rxjs": "~7.4.0", "tslib": "^2.0.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~13.0.0", "@angular-eslint/eslint-plugin": "~13.0.1", "@angular-eslint/eslint-plugin-template": "~13.0.1", "@angular-eslint/template-parser": "~13.0.1", "@angular/cli": "~13.0.0", "@angular/compiler-cli": "^13.0.0", "@angular/language-service": "^13.0.0", "@nrwl/angular": "^13.3.1", "@nrwl/cli": "13.2.1", "@nrwl/cypress": "13.3.1", "@nrwl/eslint-plugin-nx": "13.3.1", "@nrwl/jest": "13.3.1", "@nrwl/linter": "13.3.1", "@nrwl/tao": "13.2.1", "@nrwl/workspace": "13.2.1", "@types/jest": "27.0.2", "@types/node": "14.14.33", "@typescript-eslint/eslint-plugin": "~5.3.0", "@typescript-eslint/parser": "~5.3.0", "cypress": "^8.3.0", "eslint": "8.2.0", "eslint-config-prettier": "8.1.0", "eslint-plugin-cypress": "^2.10.3", "jest": "27.2.3", "jest-preset-angular": "11.0.0", "prettier": "^2.3.1", "ts-jest": "27.0.5", "typescript": "~4.4.3" } }

Angular CLI: 13.0.4 Node: 14.17.5 Package Manager: npm 6.14.14 OS: win32 x64

@angular-devkit/architect 0.1301.1 @angular-devkit/build-angular 13.0.4 @angular-devkit/core 13.0.4 @angular-devkit/schematics 13.0.4 @angular/cli 13.0.4 @angular/flex-layout 13.0.0-beta.36 @schematics/angular 13.0.4 rxjs 7.4.0 typescript 4.4.4

npx: 6.14.14 nx: 13.2.1

[Coly010]

@yoan-asdrubal Can you share the webpack.config.js and your project.json for the MFE app? If you added scriptType: "text/javascript" to the webpack config, you may have missed another step.

If you share those files I can take a look

[yoan-asdrubal]

Yes, you are rigth, maybe I have missed something. Sorry but I created a new one, in this case I did not use scriptType: "text/javascript, and its works, but I have other console.log error "Uncaught SyntaxError: Cannot use 'import.meta' outside a module" associate to style.js , maybe something wrong with angular material or other scss. thanks for your answer. Question? If I use third lib with "rxjs": "~6.5.5" as dependency, and I use in my packaje json rxjs 7.4.0, that could the cause of a similar error I reported in the issue? Thanks again

[Coly010]

The import.meta in styles.js is a problem only in dev currently, but I haven't seen it actually affect any styling. I think it's safe for now to ignore it.

Yes, having RxJS version discrepancies can cause issues, but only for libs that may share an observable for example because the typings will be incorrect.

However, if one app is completely isolated, it could use rxjs 6 whilst another isolated app uses rxjs 7.

[Coly010]

I'd personally promote sticking with a single version policy however. You can read more on the concept: https://opensource.google/docs/thirdparty/oneversion/

[yoan-asdrubal]

Thanks for your answers and your time.

[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.