search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.74k stars 11.98k forks source link

Can't use translation file for en-US: "An i18n locale ('en-US') cannot both be a source locale and provide a translation" #18422

Open MartinJaskulla opened 4 years ago

MartinJaskulla commented 4 years ago

🐞 bug report

I can't use a translation file for en-US:

i18n": {
    "locales": {
      "en-US": {
        "baseHref": "delete/us/en_us",
        "translation": "messages.en-us.xlf"
      }
    }
}

Description

Possible solutions:

🔬 Minimal Reproduction

https://github.com/MartinJaskulla/angular-issue-38316

🔥 Exception or Error


An unhandled exception occurred: An i18n locale ('en-US') cannot both be a source locale and provide a translation.

🌍 Your Environment

Angular Version:


Angular CLI: 9.0.7
Node: 12.13.1
OS: darwin x64

Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@angular/localize                 9.1.12
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant? I know that there are several workarounds. For example we could provide a non-existent source locale "sourceLocale": "aa-aa" and delete the build afterwards. However our app is very big and we want to save the build time. Furthermore our actual setup is more complex than the example provided above. For example the translations for the same locale e.g. my-app.com/de/en-US and my-app.com/us/en-US can be different. It would be useful for angular.json to provide some sort of nesting of the locales.

doliG commented 4 years ago

I have the same problem, and agree with the suggested solution

Allow translation as a property of sourceLocale

simonpeters commented 3 years ago

Same issue here, we only have one language but would like to use i18n so we can use translation tools to have non developers change the strings we use.

praxem commented 3 years ago

We have the same problem...

It is strange to think that in a huge complex application the main source of the language will be in HTML ...

nelisbijl commented 3 years ago

Same issue here, we only have one language but would like to use i18n so we can use translation tools to have non developers change the strings we use.

My workaround: Configure a fake sourceLocale in angular.json. I used zxx, which is actually a valid ISO639-2 code (https://www.loc.gov/standards/iso639-2/php/code_list.php) Only downside is a warning during ng extract-i18n:

Warning: AngularCompilerPlugin: Unable to load the locale data file "@angular/common/locales/zxx", please check that "zxx" is a valid locale id. If needed, you can use "registerLocaleData" manually.

That will possibly disappear when you choose a different valid locale code not used by your application

doliG commented 3 years ago

I use the same workaround as @nelisbijl with aa-AA as ISO code and it works.

But this is not a correct solution, can maintainer have a look at this ticket and give us a status ?

poke @alan-agius4 @clydin @filipesilva @hansl and so on...

stefan-schweiger commented 3 years ago

Any potential update on this issue? It's really annoying to manage all your text with a service like lokalise.com when you can't have the source locale as a translation target.

clydin commented 3 years ago

Private use subtags can be used to describe the unique nature of the source locale in these type of cases. For example, the following configuration section provides for a translated de locale while also describing the content within the source code as untranslated.

“i18n”: {
    “sourceLocale”: “de-x-source”,
    “locales”: {
        “de”: “./locales/de.xliff2”,
        “en”: “./locales/en.xliff2”,
        “fr”: “./locales/fr.xliff2”
    }
}
stefan-schweiger commented 3 years ago

@clydin I needed to change a few things in my extraction and upload scripts but this works well. Thank you very much :)

martijn19811 commented 2 years ago

@clydin Hi, I'm having the same issue here. Would like to use a default translations file for my sourceLocale. Although Im not sure how.

      "i18n": {
        "sourceLocale": "nl-x-source",
        "locales": {
          "nl":  "src/locale/messages.nl.xlf"
        }
      }

The build works and the NL language is being used, but it does not use the translation file. what am I missing here?

Oh, and Im actually not using the --localize flag in the application. I just want the default build to have a few translations. That's it :). Thanks for your help in advance!

damsad commented 1 year ago

Hi, I'm facing a similiar issue. I have a multilanguage app supporting many different languages. Now aside of the other language versions I my app to have a different specific variants of en locale. For example I will have en-US, en-GB, en-ZA, etc.. I expect that 95% of the phrases between this locales will be shared and only few percent will differ and specific to region. Not to duplicate all the phrases and repeat the translations within multiple en files I supposed I could utilize "en" as a source locale and put there all shared words and translations and then only put the phrases with specific regional words to target translation files (en-GB, en-US,...). However it appeared you cannot specify a translation file for a source locale and you have tu put the phrases directly into the views. Doing this instead of using resource ID's seems like an anti pattern and a maintenance nightmare. Is there a way I can achieve this kind of shared resource behavior now?

t-mish commented 1 year ago

Angular team please pay attention to it because it's seems not so hard to do but can make developers' life much easier.

createdbyjurand commented 8 months ago

Fixing Angular i18n Error

When using Angular's ng extract-i18n command, you may encounter an error message like:

An unhandled exception occurred: An i18n locale ('en-US') cannot both be a source locale and provide a translation.

This error suggests a conflict in your project configuration, particularly with the en-US locale. Here's how to resolve it:

Steps to Fix the Error

  1. Check Project Configuration: Open your Angular project's configuration file (usually angular.json). Look for the i18n section to review the sourceLocale and locales settings.

  2. Modify Locale Settings:

    • If en-US is your source locale, ensure it's not listed under locales for translations.
    • If en-US is a translation target, ensure it's only listed under locales and not set as the sourceLocale.

  3. Update Source Locale: Change your sourceLocale if necessary, ensuring it is different from the translation locales.

  4. Validate Configuration: Ensure each translation locale is unique and no locale is both sourceLocale and in the locales list.

  5. Re-run the Command: After making the changes, try running ng extract-i18n again.

Example Configuration

Here is an example snippet from an angular.json file:


{
  ...
  "projects": {
    "your-project": {
      ...
      "i18n": {
        "sourceLocale": "en-US", // Adjust as needed
        "locales": {
          "pl-PL": "src/locale/messages.pl.xlf",
          // other locales
        }
      }
      ...
    }
  }
  ...
}
doliG commented 8 months ago

@createdbyjurand We don't need you to use ChatGPT, please don't copy paste its answer in GH issues. Furthermore, this is not a valid solution.

attalbialami commented 4 months ago

+1

adi-wtag commented 2 months ago

+1

ahimik commented 1 month ago

+1