feat(nf): add shareAngularLocales helper

Author: manfredsteyer

libs/native-federation-core/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@softarc/native-federation",
-  "version": "2.0.25",
+  "version": "2.0.26",
   "type": "commonjs",
   "license": "MIT",
   "dependencies": {
     "json5": "^2.2.0",
     "npmlog": "^6.0.2",
-    "@softarc/native-federation-runtime": "2.0.25"
+    "@softarc/native-federation-runtime": "2.0.26"
   }
 }

libs/native-federation-core/src/build.ts

@@ -1,6 +1,9 @@
 export { DEFAULT_SKIP_LIST } from './lib/core/default-skip-list';
 
-export { NormalizedFederationConfig } from './lib/config/federation-config';
+export {
+  NormalizedFederationConfig,
+  SharedConfig,
+} from './lib/config/federation-config';
 export { FederationOptions } from './lib/core/federation-options';
 export { setBuildAdapter } from './lib/core/build-adapter';
 export { writeImportMap } from './lib/core/write-import-map';

libs/native-federation-esbuild/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softarc/native-federation-esbuild",
-  "version": "2.0.25",
+  "version": "2.0.26",
   "type": "commonjs",
   "dependencies": {
     "@rollup/plugin-commonjs": "^22.0.2",

libs/native-federation-node/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@softarc/native-federation-node",
-  "version": "2.0.25"
+  "version": "2.0.26"
 }

libs/native-federation-runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softarc/native-federation-runtime",
-  "version": "2.0.25",
+  "version": "2.0.26",
   "dependencies": {
     "tslib": "^2.3.0"
   },

libs/native-federation/README.md

@@ -14,6 +14,7 @@ Native Federation is a "browser-native" implementation of the successful mental
 - ✅ Easy to configure: We use the same API and Schematics as for our Module Federation plugin
 - ✅ Blazing Fast: The reference implementation not only uses the fast esbuild; it also caches already built shared dependencies.
 - ✅ Supports Angular SSR and Incremental Hydration (since 18@latest)
+- ✅ Supports Angular I18N (since 19.0.13)
 
 ## Prerequisite
 
@@ -334,6 +335,38 @@ ng serve shell -o
 
 Now, by clicking at the 2nd menu item, you can load the remote directly into the host.
 
+## Advanced Use Cases
+
+### SSR and Hydration
+
+We support Angular's SSR and (Incremental) Hydration. Please find [more information here](https://www.angulararchitects.io/blog/ssr-and-hydration-with-native-federation-for-angular/).
+
+### Native Federation and Module Federation
+
+We support combining Native Federation with Module Federation. Please find [more information here](https://www.angulararchitects.io/blog/combining-native-federation-and-module-federation/).
+
+### Angular I18N
+
+Since version 19.0.13, Native Federation for Angular supports Angular I18N. Here are some things to keep in mind:
+
+- Make sure, you also add I18N support to your shell (e.g., `ng add @angular/localize --project shell`)
+- Configure I18N in your `angular.json`. Don’t use command line parameters (as the Native Federation Builder does not forward them to the ApplicationBuilder by design)
+- In production, make sure your `federation.manifest.json` points to the right language versions of your remotes
+
+### Angular Localization
+
+To just build the localization files you need for federation, you can use the `shareAngularLocales` introduced with version 19.0.14:
+
+```js
+module.exports = withNativeFederation({
+  [...],
+  shared: {
+    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
+    ...shareAngularLocales(['en', 'de', 'fr']),
+  }
+});
+```
+
 ## FAQ
 
 ### When to use this package?

libs/native-federation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-architects/native-federation",
-  "version": "19.0.13",
+  "version": "19.0.16",
   "main": "src/index.js",
   "generators": "./collection.json",
   "builders": "./builders.json",
@@ -20,8 +20,8 @@
   },
   "dependencies": {
     "@babel/core": "^7.19.0",
-    "@softarc/native-federation": "2.0.25",
-    "@softarc/native-federation-runtime": "2.0.25",
+    "@softarc/native-federation": "2.0.26",
+    "@softarc/native-federation-runtime": "2.0.26",
     "@types/browser-sync": "^2.29.0",
     "@chialab/esbuild-plugin-commonjs": "^0.18.0",
     "browser-sync": "^3.0.2",

libs/native-federation/src/builders/build/builder.ts

@@ -44,8 +44,11 @@ import { createSharedMappingsPlugin } from '../../utils/shared-mappings-plugin';
 // import { NextHandleFunction } from 'vite';
 import { PluginBuild } from 'esbuild';
 import { FederationInfo } from '@softarc/native-federation-runtime';
-import { getI18nConfig, translateFederationArtefacts } from '../../utils/i18n';
-import { createOrUpdateGithubRelease } from 'nx/src/command-line/release/utils/github';
+import {
+  getI18nConfig,
+  I18nConfig,
+  translateFederationArtefacts,
+} from '../../utils/i18n';
 
 function _buildApplication(options, context, pluginsOrExtensions) {
   let extensions;
@@ -147,12 +150,20 @@ export async function* runBuilder(
 
   const i18n = await getI18nConfig(context);
 
+  const localeFilter = getLocaleFilter(options, runServer);
+
   const browserOutputPath = path.join(
     outputOptions.base,
     outputOptions.browser,
-    i18n?.sourceLocale || ''
+    options.localize ? i18n?.sourceLocale || '' : ''
   );
 
+  const differentDevServerOutputPath =
+    Array.isArray(localeFilter) && localeFilter.length === 1;
+  const devServerOutputPath = !differentDevServerOutputPath
+    ? browserOutputPath
+    : path.join(outputOptions.base, outputOptions.browser, options.localize[0]);
+
   const fedOptions: FederationOptions = {
     workspaceRoot: context.workspaceRoot,
     outputPath: browserOutputPath,
@@ -192,7 +203,7 @@ export async function* runBuilder(
 
       const fileName = path.join(
         fedOptions.workspaceRoot,
-        fedOptions.outputPath,
+        devServerOutputPath,
         url
       );
 
@@ -246,8 +257,13 @@ export async function* runBuilder(
   }
 
   const hasLocales = i18n?.locales && Object.keys(i18n.locales).length > 0;
-  if (!runServer && hasLocales) {
-    translateFederationArtefacts(i18n, outputOptions.base, federationResult);
+  if (hasLocales && localeFilter) {
+    translateFederationArtefacts(
+      i18n,
+      localeFilter,
+      outputOptions.base,
+      federationResult
+    );
   }
 
   options.deleteOutputPath = false;
@@ -306,7 +322,21 @@ export async function* runBuilder(
     if (!first && (nfOptions.dev || watch)) {
       setTimeout(async () => {
         try {
-          await buildForFederation(config, fedOptions, externals);
+          federationResult = await buildForFederation(
+            config,
+            fedOptions,
+            externals
+          );
+
+          if (hasLocales && localeFilter) {
+            translateFederationArtefacts(
+              i18n,
+              localeFilter,
+              outputOptions.base,
+              federationResult
+            );
+          }
+
           logger.info('Done!');
         } catch {
           logger.error('Not successful!');
@@ -327,6 +357,22 @@ export async function* runBuilder(
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default createBuilder(runBuilder) as any;
 
+function getLocaleFilter(
+  options: ApplicationBuilderOptions,
+  runServer: boolean
+) {
+  let localize = options.localize || false;
+
+  if (runServer && Array.isArray(localize) && localize.length > 1) {
+    localize = false;
+  }
+
+  if (runServer && localize === true) {
+    localize = false;
+  }
+  return localize;
+}
+
 function removeBaseHref(req: any, baseHref?: string) {
   let url = req.url;
 

libs/native-federation/src/config.ts

@@ -5,3 +5,5 @@ export {
   shareAll,
   DEFAULT_SKIP_LIST,
 } from '@softarc/native-federation/build';
+
+export { shareAngularLocales } from './utils/angular-locales';

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

@@ -432,7 +432,7 @@ function setNgServerMode(): void {
       if (!content.includes(lineToAdd)) {
         content = lineToAdd + '\n' + content;
         fs.writeFileSync(fileToPatch, content);
-      } 
+      }
     }
   } catch (e) {
     console.error(