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

hal1984 · 2025-03-15T11:15:42Z

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

Clone repo
npm install
npm run build:mfe1 or npm run build:shell

The build crash with the following output:

npm run build:mfe1

> [email protected] 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 

> [email protected] 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

The text was updated successfully, but these errors were encountered:

hal1984 · 2025-03-15T12:28:14Z

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 · 2025-03-15T12:43:25Z

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 

> [email protected] 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 · 2025-03-19T22:05:47Z

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

hal1984 · 2025-03-19T23:24:37Z

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 · 2025-04-07T10:38:35Z

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

hal1984 mentioned this issue Mar 15, 2025

fix(nf-node): update ngServerMode declaration to use var and handle e… #796

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

hal1984 commented Mar 15, 2025 •

edited

Loading

hal1984 commented Mar 15, 2025 •

edited

Loading

hal1984 commented Mar 15, 2025 •

edited

Loading

manfredsteyer commented Mar 19, 2025

hal1984 commented Mar 19, 2025

joyb-works commented Apr 7, 2025

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

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

Comments

hal1984 commented Mar 15, 2025 • edited Loading

With what library do you have an issue?

Reproduction of the bug/regression with instructions

Expected behavior

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

Other information

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

hal1984 commented Mar 15, 2025 • edited Loading

hal1984 commented Mar 15, 2025 • edited Loading

manfredsteyer commented Mar 19, 2025

hal1984 commented Mar 19, 2025

joyb-works commented Apr 7, 2025

hal1984 commented Mar 15, 2025 •

edited

Loading

hal1984 commented Mar 15, 2025 •

edited

Loading

hal1984 commented Mar 15, 2025 •

edited

Loading