Angular Monorepo SSR

[mishkaie]

Current Behavior

Hi guys, I have tried to use this guideline https://nx.dev/recipes/angular/module-federation-with-ssr for Angular monorepo with ssr on multiple devices on angular v18 , nx v20.
Still didn't get result expected.

Here is error

loadShareSync failed! The function should not be called unless you set "eager:true". If you do not set it, and encounter this issue, you can check whether an async boundary is implemented.
The original error message is as follows:
./node_modules/@module-federation/webpack-bundler-runtime/dist/index.cjs.js:235
throw err;
^

Error:
The loadShareSync function was unable to load @angular/platform-server. The @angular/platform-server could not be found in web.
Possible reasons for failure:

    1. The @angular/platform-server share was registered with the 'get' attribute, but loadShare was not used beforehand.

    2. The @angular/platform-server share was not registered with the 'lib' attribute.

  
at loadShareSync (./node_modules/@module-federation/runtime/dist/index.cjs.js:1433:23)
at loadShareSync (./node_modules/@module-federation/runtime/dist/index.cjs.js:1900:35)
at handleInitialConsumes (./node_modules/@module-federation/webpack-bundler-runtime/dist/index.cjs.js:229:35)
at module (./node_modules/@module-federation/webpack-bundler-runtime/dist/index.cjs.js:245:29)
at __webpack_require__ (./webpack/bootstrap:22:1)
at 46780 (C:\Users\mzhvania\Desktop\frontend\dist\apps\web\web\server\main.js:18:82)
at args (./webpack/bootstrap:22:1)
at args (./webpack/startup:5:1)
at Object.<anonymous> (./webpack/startup:5:1)
at Module._compile (node:internal/modules/cjs/loader:1546:14)

Node.js v22.11.0

A server error has occurred.
node exited with 1 code.

package.json

{
"name": "@projectname/source",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"web": "nx serve web",
"web-ssr": "nx serve-ssr web",
"mob": "nx serve mob",
"mob-ssr": "nx serve-ssr mob"
},
"private": true,
"dependencies": {
"@angular/animations": "~18.2.0",
"@angular/common": "~18.2.0",
"@angular/compiler": "~18.2.0",
"@angular/core": "~18.2.0",
"@angular/forms": "~18.2.0",
"@angular/platform-browser": "~18.2.0",
"@angular/platform-browser-dynamic": "~18.2.0",
"@angular/platform-server": "~18.2.0",
"@angular/router": "~18.2.0",
"@angular/ssr": "~18.2.0",
"@module-federation/node": "~2.5.0",
"@nx/angular": "20.1.3",
"compression": "^1.7.5",
"cors": "~2.8.5",
"express": "~4.18.2",
"rxjs": "~7.8.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~18.2.0",
"@angular-devkit/core": "~18.2.0",
"@angular-devkit/schematics": "~18.2.0",
"@angular/cli": "~18.2.0",
"@angular/compiler-cli": "~18.2.0",
"@angular/language-service": "~18.2.0",
"@eslint/js": "^9.8.0",
"@module-federation/enhanced": "0.6.9",
"@nrwl/angular": "^19.8.4",
"@nx/cypress": "20.1.3",
"@nx/eslint": "20.1.3",
"@nx/eslint-plugin": "20.1.3",
"@nx/jest": "20.1.3",
"@nx/js": "20.1.3",
"@nx/web": "20.1.3",
"@nx/webpack": "20.1.3",
"@nx/workspace": "20.1.3",
"@schematics/angular": "~18.2.0",
"@swc-node/register": "~1.9.1",
"@swc/core": "~1.5.7",
"@swc/helpers": "~0.5.11",
"@types/compression": "^1.7.5",
"@types/cors": "~2.8.5",
"@types/express": "4.17.14",
"@types/jest": "^29.5.12",
"@types/node": "18.16.9",
"@typescript-eslint/utils": "^8.0.0",
"angular-eslint": "^18.3.0",
"browser-sync": "^3.0.0",
"cypress": "^13.13.0",
"eslint": "^9.8.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-cypress": "^3.5.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-preset-angular": "~14.1.0",
"nx": "20.1.3",
"prettier": "^2.6.2",
"ts-jest": "^29.1.0",
"ts-node": "10.9.1",
"tslib": "^2.3.0",
"typescript": "~5.5.2",
"typescript-eslint": "^8.0.0"
}
}

module-federation.config.ts

  import { ModuleFederationConfig } from '@nx/webpack';
  
  const config: ModuleFederationConfig = {
  	name: 'web',
          remotes: [
            'casino',
          ],
  };
  export default config;

webpack.server.config.ts

  import { withModuleFederationForSSR } from '@nx/angular/module-federation';
  import config from './module-federation.config';
  
  export default withModuleFederationForSSR(config, { dts: false });

didn't change main.server.ts at all.

building with command nx serve-ssr web --devRemotes=casino

CSR build with nx serve web works fine

everything else is by default didn't change anything.

Thanks you in advance.

Expected Behavior

To successfully serve on ssr Angular monorepo.

GitHub Repo

No response

Steps to Reproduce

1. https://nx.dev/recipes/angular/module-federation-with-ssr
   just use this tutorial

Nx Report

> loadShareSync failed! The function should not be called unless you set "eager:true". If you do not set it, and encounter this issue, you can check whether an async boundary is implemented.
> The original error message is as follows: 
> ./node_modules/@module-federation/webpack-bundler-runtime/dist/index.cjs.js:235
>         throw err;
>         ^
> 
> 
> Error: 
>         The loadShareSync function was unable to load @angular/platform-server. The @angular/platform-server could not be found in web.
>         Possible reasons for failure: 
> 
>         1. The @angular/platform-server share was registered with the 'get' attribute, but loadShare was not used beforehand.
> 
>         2. The @angular/platform-server share was not registered with the 'lib' attribute.
> 
>       
>     at loadShareSync (./node_modules/@module-federation/runtime/dist/index.cjs.js:1433:23)
>     at loadShareSync (./node_modules/@module-federation/runtime/dist/index.cjs.js:1900:35)
>     at handleInitialConsumes (./node_modules/@module-federation/webpack-bundler-runtime/dist/index.cjs.js:229:35)
>     at module (./node_modules/@module-federation/webpack-bundler-runtime/dist/index.cjs.js:245:29)
>     at __webpack_require__ (./webpack/bootstrap:22:1)
>     at 46780 (C:\Users\mzhvania\Desktop\frontend\dist\apps\web\web\server\main.js:18:82)
>     at args (./webpack/bootstrap:22:1)
>     at args (./webpack/startup:5:1)
>     at Object.<anonymous> (./webpack/startup:5:1)
>     at Module._compile (node:internal/modules/cjs/loader:1546:14)
> 
> Node.js v22.11.0
> 
> A server error has occurred.
> node exited with 1 code.

Failure Logs

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[Coly010]

Fixed by: #29104

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