Angular: module federation and i18n localized builds

[dkornel]

Hi all,

I'm building the angular app using different locale ids. I'm struggling with setting up localized builds and module federation e.g.: I would like to use en source locale instead of default en-US and I would like to build different versions of the app (en, fr, de, pl etc.)

Is is possible to use module federation with localized builds ?

Please see repo with config that fails: https://github.com/dkornel/nx-mf-and-i18n-builds

[dkornel]

My problem is also partially related to angular/angular-cli#23008

but

even if I patch "node_modules@angular-devkit\build-angular\src\utils\process-bundle.js" and change sourceType from "script" to "unambiguous" and successfully build the projects. I'm still getting the error:

[luii]

I have a existing Monorepo and im converting it to use module federation and im also receiving the first error from the screenshot when placing import '@angular/localize/init' in polyfills.ts for now im sticking to the old approach (incremental builds).

[ido-lempert]

For now I'm using this workaround. Still looking for a better solution

// module-federation.config.js
module.exports = {
  // …
  shared: (name, config) => {
    if (name === '@angular/localize/tools' || name === '@angular/localize') {
      return {...config, eager: true};
    } else {
      return config;
    }
  }
};

(*) ֿI`m use it with NX v14.1.5 - on v14.6.4 Irrelevant

// node_modules/@angular-devkit/build-angular/src/utils/process-bundle.js
ast = (0, core_1.parseSync)(options.code, {
    babelrc: false,
    configFile: false,
    sourceType: 'unambiguous',
    filename: options.filename,
});

(*) change sourceType: 'script' to sourceType: 'unambiguous'

Disable extract license on prod mode or exclude workspace package:

// webpack.prod.config.js
const { merge } = require('webpack-merge');
const {withModuleFederation} = require('@nrwl/angular/module-federation');
const LicenseWebpackPlugin = require('license-webpack-plugin').LicenseWebpackPlugin;

const packageJson = require('../../package.json'); // workspace package.json
const mfConfig = require('./module-federation.config');

module.exports = async (config, context) => {
  const federatedModules = await withModuleFederation({
    ...mfConfig
  });

  const licenseWebpackPlugin = new LicenseWebpackPlugin({
    stats: { warnings: false, errors: false },
    perChunkOutput: false,
    outputFilename: '3rdpartylicenses.txt',
    skipChildCompilers: true,
    excludedPackageTest: (package) => { // exclude root workspace package name
      return package === packageJson.name;
    }
  });

  config.plugins = config.plugins.map(plugin => {
    if (plugin instanceof LicenseWebpackPlugin) {
      return licenseWebpackPlugin;
    } else {
      return plugin;
    }
  })

  return merge(federatedModules(config, context), {
    // extras
  });
};

[minijus]

I have register issue regarding license-webpack-plugin and localized module federated app builds without first seeing this discussion: #12317 . Nice finding @ido-lempert it could be helpful solving the in a more generic way without a need to reconfigure the plugin on each app.

Also, it there are issues using extract-i18n on Angular host apps that have at least one reference to remote (#12312). Was anyone able to find a workaround for this?

[random-rage]

With Nx 15.5 and Angular 15
I use

// module-federation.config.js
module.exports = {
  // …
  shared: (libraryName, libraryOptions) => {
    switch (libraryName) {
      case '@angular/localize':
        return {
          ...libraryOptions,
          eager: true,
          import: '@angular/localize',
        };
      case '@angular/localize/init':
        return {
          ...libraryOptions,
          eager: true,
          import: '@angular/localize/init',
        };
      default:
        return libraryOptions;
    }
  },
};

in one app and

// module-federation.config.js
module.exports = {
  // …
  shared: (libraryName, libraryOptions) => {
    switch (libraryName) {
      case '@angular/localize/init':
        return {
          ...libraryOptions,
          eager: true,
          import: '@angular/localize',
        };
      default:
        return libraryOptions;
    }
  },
};

in another

[JakubPawlak]

Function withModuleFederation seems to ignore import field in your module-federation.config.js (see: https://github.com/nrwl/nx/blob/master/packages/angular/src/utils/mf/utils.ts)
All above solutions still result in Uncaught Error: Shared module @angular/localize/init doesn't exist in shared scope default and blank page after building the application :(

[JakubPawlak]

I came up with a workaround. '@angular/localize/init' and '@angular/localize' should not be shared.

module.exports = {
  name: 'shell',
  remotes: [],
  shared: (libraryName, libraryOptions) => {
      if (
      libraryName ===   '@angular/localize' ||
      libraryName === '@angular/localize/init'
      ) {
       return false
      }
  },
};

The libraries used in polyfills should not be used in the runtime and this is the reason they should be skipped from sharing. The downside of this solution is that you can't serve the application with localize set to false. It should be explicitly set to a language.

        "development": {
          (...)
          "localize": ["en"]
        }