Translations not working in builds with ivy

Question

I have some old non-cli based Angular 9 project which I am to gradually upgrade to new versions. I just finished upgrading it to Angular 10 but with ivy disabled. The current task I am working on is to enable ivy.

This is the code I am using to generate localize builds after the compilation is complete. It would be good if someone can point me to a tool with which I can generate localized builds without writing any custom code.

  const {getEmittedFiles} = require('@angular-devkit/build-webpack/src/utils');
  const {createTranslationLoader} = require('@angular-devkit/build-angular/src/utils/load-translations');
  const {i18nInlineEmittedFiles} = require('@angular-devkit/build-angular/src/utils/i18n-inlining');

  // ...

  // stats is coming from webpack callback function
  const emittedFiles = getEmittedFiles(stats.compilation);
  const context = { logger: console };

  // Create a configuration
  const i18n = {
    inlineLocales: new Set([ 'fr-CA' ]),
    sourceLocale: 'en-US',
    locales: {
      'fr-CA': {
        files: [{
          path: './app/locale/messages.fr-CA.xlf',
        }],
      },
    },
    shouldInline: true,
    flatOutput: false,
  };

  const loader = await createTranslationLoader();

  for (const [locale, desc] of Object.entries(i18n.locales)) {
    const file = desc.files[0];

    if (i18n.inlineLocales.has(locale) && file) {
      const filePath = file.path;
      const result = loader(path.join(getAppRootDir(), filePath));

      for (const diagnostics of result.diagnostics.messages) {
        console.log(diagnostics);
        if (diagnostics.type === 'error') {
          throw new Error(
            `Error parsing translation file '${filePath}': ${diagnostics.message}`,
          );
        } else {
          context.logger.warn(`WARNING [${filePath}]: ${diagnostics.message}`);
        }
      }

      file.format = result.format;
      file.translation = result.translations;
      file.integrity = result.integrity;
      file.dataPath = path.join(findLocaleDataBasePath(getAppRootDir()), locale + '.js');
    }
  }

  const success = await i18nInlineEmittedFiles(
    context,
    emittedFiles,
    i18n,
    outputPath,
    [outputPath],
    [],
    tempPath, // temp path generated for i18n
    true,
    'warning',
  );

  console.log(success);
}

The problem I am facing is the French build is not translated. It's showing English. This is the code that's generated by ivy engine.

    var i18n_1;
    if (typeof ngI18nClosureMode !== "undefined" && ngI18nClosureMode) {
        const MSG_EXTERNAL_3912372831646713891$$APP_MISC_PAGE_HEADER_PAGE_HEADER_COMPONENT_TS___2 = goog.getMsg("All Groups");
        i18n_1 = MSG_EXTERNAL_3912372831646713891$$APP_MISC_PAGE_HEADER_PAGE_HEADER_COMPONENT_TS___2;
    }
    else {
        i18n_1 = $localize `:␟24a9d68869557935c4ae504fb103b8c32470f249␟3912372831646713891:All Groups`;
    }

I have debugged this code and found ngI18nClosureMode is never defined, and it always goes in else block where $localize is present. Can anyone guide me what I am doing wrong here?

Project info

Angular CLI: custom configured project
Node: 14.21.3
Package Manager: npm 6.14.18
OS: Ubuntu 22.04.4