"Identifier 'ngServerMode' has already been declared" when prerender is true

[hal1984]

With what library do you have an issue?

native-federation

Reproduction of the bug/regression with instructions

https://github.com/hal1984/native-federation-19/tree/ngServerMode

1. Clone repo
2. npm install
3. npm run build:mfe1 or npm run build:shell

The build crash with the following output:

npm run build:mfe1

> native-federation-19@0.0.0 build:mfe1
> ng build mfe1

 INFO  Building federation artefacts
Browser bundles      
Initial chunk files   | Names            |  Raw size | Estimated transfer size
polyfills-7JMRL5KN.js | polyfills        |  72.02 kB |                23.27 kB
main-ECDM4YT5.js      | main             |   2.50 kB |                 1.01 kB
chunk-2VMXMS7J.js     | -                | 661 bytes |               661 bytes
styles-5INURTSO.css   | styles           |   0 bytes |                 0 bytes

                      | Initial total    |  75.18 kB |                24.95 kB

Lazy chunk files      | Names            |  Raw size | Estimated transfer size
chunk-ETZQPVKB.js     | bootstrap        | 955 bytes |               955 bytes


Server bundles       
Initial chunk files   | Names            |  Raw size
polyfills.server.mjs  | polyfills.server |  31.05 kB |                        
server.mjs            | server           |  16.20 kB |                        
chunk-2XAXBCZJ.mjs    | -                |   1.44 kB |                        
chunk-3QHYWY55.mjs    | -                |   1.31 kB |                        
main.server.mjs       | main.server      | 603 bytes |                        

Lazy chunk files      | Names            |  Raw size
chunk-MWNT6HXB.mjs    | bootstrap-server | 877.14 kB |                        

Prerendered 0 static routes.
Application bundle generation failed. [1.731 seconds]

✘ [ERROR] An error occurred while extracting routes.

SyntaxError: Identifier 'ngServerMode' has already been declared
    at compileSourceTextModule (node:internal/modules/esm/utils:338:16)
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:102:18)
    at #translate (node:internal/modules/esm/loader:468:12)
    at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:515:27)


An unhandled exception occurred: server is not started
See "/private/var/folders/67/hnw5gdhs6_x2j21kn2h8kll40000gn/T/ng-0ZBphv/angular-errors.log" for further details.

npm run build:shell 

> native-federation-19@0.0.0 build:shell
> ng build shell

 INFO  Building federation artefacts
Browser bundles      
Initial chunk files   | Names            |  Raw size | Estimated transfer size
polyfills-7JMRL5KN.js | polyfills        |  72.02 kB |                23.27 kB
chunk-OBBLAJGF.js     | -                |   4.31 kB |                 1.58 kB
main-FMDHO5MO.js      | main             | 164 bytes |               164 bytes
styles-5INURTSO.css   | styles           |   0 bytes |                 0 bytes

                      | Initial total    |  76.49 kB |                25.02 kB

Lazy chunk files      | Names            |  Raw size | Estimated transfer size
chunk-FTDKJ2JJ.js     | bootstrap        |   1.40 kB |               546 bytes


Server bundles       
Initial chunk files   | Names            |  Raw size
polyfills.server.mjs  | polyfills.server |  31.05 kB |                        
server.mjs            | server           |  14.40 kB |                        
chunk-YV667WEZ.mjs    | -                |   4.82 kB |                        
chunk-TSZOCMSY.mjs    | -                |   1.83 kB |                        
main.server.mjs       | main.server      | 603 bytes |                        

Lazy chunk files      | Names            |  Raw size
chunk-XSQPPJAP.mjs    | bootstrap-server | 877.14 kB |                        

Prerendered 0 static routes.
Application bundle generation failed. [1.820 seconds]

✘ [ERROR] An error occurred while extracting routes.

SyntaxError: Identifier 'ngServerMode' has already been declared
    at compileSourceTextModule (node:internal/modules/esm/utils:338:16)
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:102:18)
    at #translate (node:internal/modules/esm/loader:468:12)
    at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:515:27)


An unhandled exception occurred: server is not started
See "/private/var/folders/67/hnw5gdhs6_x2j21kn2h8kll40000gn/T/ng-o223tB/angular-errors.log" for further details.

Expected behavior

Build succeeds

Versions of Native/Module Federation, Angular, Node, Browser, and operating system

Native Federation: 19.0.16
Angular: 19.2.2
Node: 22.14.0
Browser: Chrome
Operating systems: macOS Sequoia

Other information

For MFE1 the new Server Routing have been used.
https://angular.dev/guide/hybrid-rendering.

For shell the default SSR with "prerender": "true" have been used. Both appear to fail with the same error.

I would be willing to submit a PR to fix this issue

• Yes
• No

[hal1984]

I managed to fix the issue for the default SSR with prerender: true changing in the following file:

https://github.com/angular-architects/module-federation-plugin/blob/main/libs/native-federation/src/utils/angular-esbuild-adapter.ts

the method function setNgServerMode() to:

function setNgServerMode() {
  const fileToPatch = 'node_modules/@angular/core/fesm2022/core.mjs';
  const lineToAdd = `var ngServerMode = (typeof window === 'undefined') ? true : false;`;
  try {
      if (fs.existsSync(fileToPatch)) {
          let content = fs.readFileSync(fileToPatch, 'utf-8');
          // Check if const ngServerMode exists and replace it
          if (content.includes('const ngServerMode')) {
              content = content.replace(/const ngServerMode.*/, lineToAdd);
          }
          // If not found, add it at the beginning
          else if (!content.includes(lineToAdd)) {
              content = lineToAdd + '\n' + content;
          }
          fs.writeFileSync(fileToPatch, content);
      }
  }
  catch (e) {
      console.error('Error patching file ', fileToPatch, '\nIs it write-protected?');
  }
}

[hal1984]

I have created a PR to fix the issue about prerendering with the default SSR:

#796

When using the new angularAppEngine / Server Routing stills the builds fails, but I think that is a different issue:

Application bundle generation failed. [3.204 seconds]

✘ [ERROR] An error occurred while extracting routes.

Error: Angular app engine manifest is not set. Please ensure you are using the '@angular/build:application' builder to build your server application.

but with the default SSR now runs ok:

npm run build:shell 

> native-federation-19@0.0.0 build:shell
> ng build shell

 INFO  Building federation artefacts
Browser bundles      
Initial chunk files   | Names            |  Raw size | Estimated transfer size
polyfills-7JMRL5KN.js | polyfills        |  72.02 kB |                23.27 kB
chunk-OBBLAJGF.js     | -                |   4.31 kB |                 1.58 kB
main-FMDHO5MO.js      | main             | 164 bytes |               164 bytes
styles-5INURTSO.css   | styles           |   0 bytes |                 0 bytes

                      | Initial total    |  76.49 kB |                25.02 kB

Lazy chunk files      | Names            |  Raw size | Estimated transfer size
chunk-FTDKJ2JJ.js     | bootstrap        |   1.40 kB |               546 bytes


Server bundles       
Initial chunk files   | Names            |  Raw size
polyfills.server.mjs  | polyfills.server |  31.05 kB |                        
server.mjs            | server           |  14.40 kB |                        
chunk-YV667WEZ.mjs    | -                |   4.82 kB |                        
chunk-TSZOCMSY.mjs    | -                |   1.83 kB |                        
main.server.mjs       | main.server      | 603 bytes |                        

Lazy chunk files      | Names            |  Raw size
chunk-XSQPPJAP.mjs    | bootstrap-server | 877.14 kB |                        

Prerendered 3 static routes.
Application bundle generation complete. [4.384 seconds]

Output location: /Users/jorge/Desktop/native-federation-19/dist/shell

[manfredsteyer]

Thanks. But did prerender work after that change? IMHO pretender is not supported currently by NF

[hal1984]

Thanks. But did prerender work after that change? IMHO pretender is not supported currently by NF

Prerendering works, but only with the fallback option in the loadRemoteModule function within the route array; otherwise, it fails with an "Unknown remote " error. The remotes aren't loaded yet because initNodeFederation has not been called by that point. As a result, the prerendered HTML files do not contain any remote code, only the fallback one.

I tried calling it earlier, before the prerendering process starts rendering the routes, during the bootstrap process in main.server.ts. However, it fails because dist/browser has not been compiled yet.

At least, that's what I have been able to test.

[joyb-works]

I have created a fresh nx project with a host and remote for angular based on your guidelines still there is an error. the shell builds fine but the remote fails

[sajay-g]

Hey @hal1984 , just a quick thought on the side: any luck getting the AngularNodeAppEngine app up and running?

[sajay-g]

@hal1984 Based on this issue, it seems the output mode might not be set correctly. Could this be the reason for the "Angular app engine manifest is not set." error when using AngularNodeAppEngine?

@manfredsteyer This issue seems to be related to #853. It’s currently impacting our progress—just wanted to check if there’s a chance this might be addressed in an upcoming patch release?

[manfredsteyer]

This one is resolved now with the latest version (20.0.2) that also works with Angular 19.

Please find all details here:

https://www.angulararchitects.io/blog/ssr-and-hydration-with-native-federation-for-angular/