Como posso implementar a internacionalização em um projeto Angular v11 separando os arquivos de tradução por módulo ou por página

Eu estava trabalhando em um projeto de exemplo, mas ficou muito claro que você está trocando o tamanho do arquivo de tradução pela sobrecarga de ter que combinar os vários arquivos de tradução e/ou sincronizar várias instâncias do TranslateService.

tl;dr essa é uma má ideia. A documentação recomenda uma abordagem centralizada (apenas chamando especificamente o uso de uma pasta para agrupar arquivos de tradução, mas implicando que todos os arquivos de tradução devem estar lá):

Recomendamos usar uma i18npasta dentro da pasta assetsou publicpara organizar seus arquivos de tradução em um só lugar.

Em relação à sua preocupação de que "um único arquivo acabaria se tornando grande e confuso", a seção de gerenciamento de traduções da documentação aborda uma maneira de agilizar a edição. Não estou incluindo isso na minha resposta porque promove um produto específico (pago).

Além disso, a seção why [...] contextuais ids [...] da documentação recomenda o uso de definições de tradução aninhadas que permitem o agrupamento por aspectos centrados no desenvolvedor da base de código, como páginas, módulos, componentes ou recursos, o que torna a organização (e, portanto, a localização) das traduções mais fácil:

{
  "app": {
    "language": "current language",
    "settings": "Application settings",
    "log-out": "Log out"
  },
  "product-page": {
    "call-to-action": "Sign up today!",
    "pricing": "pricing",
    "license-notice": "Licenses are per-user and subject to certain terms",
    "terms-of-license": "license terms"
  },
  "print-feature": {
    "header": "Printing has never been so easy",
    "from-dialog": {
      "header": "Intuitive dialogs guide users through the printing process",
      "legal": "All dialogs conform to WCAG 2 standards"
    },
    "from-shortcuts": {
      "header": "Keyboard shortcuts are provided for power users",
    }
  },
}

Mas se você quisesse fazer isso...

No caso de uso padrão, cada instância de TranslateServiceabre um único <lang>.jsonarquivo. Se você quiser um <lang>.jsonarquivo por módulo/componente, então você precisa adicionar manualmente as traduções do arquivo de tradução daquele módulo/componente às chaves de tradução conhecidas do existente TranslateServiceou você precisa de uma nova instância de TranslateServicepara o arquivo de tradução do módulo/componente.

A primeira abordagem deve ser possível setTranslation, mas você terá que carregar o <lang>.jsonarquivo na memória e analisá-lo InterpolatableTranslationObjectvocê mesmo.

Não estou confiante de que essa abordagem funcione como esperado e você pode encontrar alguns problemas (talvez ter que acionar manualmente a detecção de alterações, talvez ter que alternar manualmente o idioma de e para o idioma atual para acionar novas traduções, talvez ter que adiar o carregamento de componentes até que o módulo/componente atual tenha terminado de corrigir suas traduções, etc.), não sei.

Mas aqui está o que um esboço poderia parecer:

import { Component } from '@angular/core';
import { InterpolatableTranslationObject, TranslateService } from '@ngx-translate/core';

// This component should be loaded at the root of this
// feature module so that translations for the components
// in this module can be patched.
@Component({ /*...*/ })
export class FooModuleRootComponent { 

  // The `HttpClient` instance can be provided by the application
  // because we don't have any specific requirements.
  // The `TranslateService` instance is also provided by the
  // application so that we have a single source of truth for
  // setting the current language and getting translations for
  // the current language.
  constructor(
    private readonly http: HttpClient,
    private readonly translateService: TranslateService
  ) {
    this.appendTranslations('en');
    this.appendTranslations('es');
  }

  /**
   * Fetches this module's translation file for the provided language
   * and appends the contained translations to the current translation
   * service.
   */
  appendTranslations(lang: string) {
    // InterpolatableTranslationObject and the child InterpolatableTranslation
    // can be reduced to effective aliases for `Record<string, string | string[]>` and
    // `string` respectively, so we should be fine to choose to type the raw JSON
    // response as `InterpolatableTranslationObject` here. 
    // This assumes simple use cases.
    this.http.get<InterpolatableTranslationObject>(`path/to/feature/${lang}.json`).subscribe({
      next: translations => {
        // The last parameter (shouldMerge) must be true or this will overwrite
        // the translations loaded elsewhere.
        this.translateService.setTranslation(lang, translations, true);
      },
    });
  }
}

Você também pode tentar seguir esta resposta de daniel-sc para atualizar/mesclar arquivos de tradução i18n no Angular .

Uma solução alternativa/nova (para o ngx-i18nsupport não mantido) é https://github.com/daniel-sc/ng-extract-i18n-merge

Após a instalação via

ng add ng-extract-i18n-merge

as traduções serão extraídas e mescladas com o comando:

ng extract-i18n

A segunda abordagem que requer um meta serviço (ou token de injeção, mais provavelmente) para sincronizar várias instâncias do TranslateServiceé um sinal vermelho imediato para mim de que essa não é uma boa abordagem. Eu não tentaria a menos que fosse a última opção possível.