fix(nf-node): set ngServerMode at runtime

Author: manfredsteyer

libs/native-federation-node/src/lib/node/init-node-federation.ts

@@ -53,7 +53,7 @@ async function createNodeImportMap(
       : await loadFsManifest(remotesOrManifestUrl);
 
   const hostInfo = await loadFsFederationInfo(relBundlePath);
-  const hostImportMap = await processHostInfo(hostInfo, relBundlePath);
+  const hostImportMap = await processHostInfo(hostInfo, './' + relBundlePath);
   const remotesImportMap = await processRemoteInfos(remotes, {
     throwIfRemoteNotFound: options.throwIfRemoteNotFound,
     cacheTag: options.cacheTag,

libs/native-federation/src/schematics/init/schematic.ts

@@ -484,8 +484,12 @@ function makeServerAsync(
       return;
     }
 
+    const cors = `import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+const cors = require("cors"); 
+`;
     const mainContent = tree.read(server).toString('utf8');
-    const updatedContent = (`import cors from 'cors';\n` + mainContent)
+    const updatedContent = (cors + mainContent)
       .replace(
         `const port = process.env['PORT'] || 4000`,
         `const port = process.env['PORT'] || ${options.port || 4000}`

libs/native-federation/src/utils/angular-esbuild-adapter.ts

@@ -38,9 +38,6 @@ import {
 import { RebuildEvents, RebuildHubs } from './rebuild-events';
 
 import JSON5 from 'json5';
-// import { ComponentStylesheetBundler } from '@angular/build/src/tools/esbuild/angular/component-stylesheets';
-
-// const fesmFolderRegExp = /[/\\]fesm\d+[/\\]/;
 
 export type MemResultHandler = (
   outfiles: esbuild.OutputFile[],
@@ -72,6 +69,8 @@ export function createAngularBuildAdapter(
       platform,
     } = options;
 
+    setNgServerMode();
+
     const files = await runEsbuild(
       builderOptions,
       context,
@@ -285,26 +284,6 @@ async function runEsbuild(
       createCompilerPlugin(
         pluginOptions.pluginOptions,
         pluginOptions.styleOptions
-
-        // TODO: Once available, use helper functions
-        //  for creating these config objects:
-        //  @angular_devkit/build_angular/src/tools/esbuild/compiler-plugin-options.ts
-        // {
-        //   jit: false,
-        //   sourcemap: dev,
-        //   tsconfig: tsConfigPath,
-        //   advancedOptimizations: !dev,
-        //   thirdPartySourcemaps: false,
-        // },
-        // {
-        //   optimization: !dev,
-        //   sourcemap: dev ? 'inline' : false,
-        //   workspaceRoot: __dirname,
-        //   inlineStyleLanguage: builderOptions.inlineStyleLanguage,
-        //   // browsers: browsers,
-
-        //   target: target,
-        // }
       ),
       ...(mappedPaths && mappedPaths.length > 0
         ? [createSharedMappingsPlugin(mappedPaths)]
@@ -338,17 +317,9 @@ async function runEsbuild(
     ctx.dispose();
   }
 
-  // cleanUpTsConfigForFederation(tsConfigPath);
-
   return writtenFiles;
 }
 
-// function cleanUpTsConfigForFederation(tsConfigPath: string) {
-//   if (tsConfigPath.includes('.federation.')) {
-//     fs.unlinkSync(tsConfigPath);
-//   }
-// }
-
 function createTsConfigForFederation(
   workspaceRoot: string,
   tsConfigPath: string,
@@ -365,11 +336,6 @@ function createTsConfigForFederation(
     .map((ep) => path.relative(tsconfigDir, ep.fileName).replace(/\\\\/g, '/'));
 
   const tsconfigAsString = fs.readFileSync(fullTsConfigPath, 'utf-8');
-  // const tsconfigWithoutComments = tsconfigAsString.replace(
-  //   /\/\*.+?\*\/|\/\/.*(?=[\n\r])/g,
-  //   ''
-  // );
-
   const tsconfig = JSON5.parse(tsconfigAsString);
 
   if (!tsconfig.include) {
@@ -450,3 +416,32 @@ export function loadEsmModule<T>(modulePath: string | URL): Promise<T> {
     modulePath
   ) as Promise<T>;
 }
+
+//
+//  Usually, ngServerMode is set during bundling. However, we need to infer this
+//  value at runtime as we are using the same shared bundle for @angular/core
+//  on the server and in the browser. 
+//
+function setNgServerMode(): void {
+  const fileToPatch = 'node_modules/@angular/core/fesm2022/core.mjs';
+  const lineToAdd = `const ngServerMode = (typeof window === 'undefined') ? true : false;`;
+
+  try {
+    if (fs.existsSync(fileToPatch)) {
+      let content = fs.readFileSync(fileToPatch, 'utf-8');
+      if (!content.includes(lineToAdd)) {
+        content = lineToAdd + '\n' + content;
+        fs.writeFileSync(fileToPatch, content);
+        console.log('patched!');
+      } else {
+        console.log('not patched!');
+      }
+    }
+  } catch (e) {
+    console.error(
+      'Error patching file ',
+      fileToPatch,
+      '\nIs it write-protected?'
+    );
+  }
+}