Skip to content

Angular-i18n Guide #24474

@tatsujb

Description

@tatsujb

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

on the doc here (https://angular.io/guide/i18n) I can't tell if it would be ok or not to do something like this :

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="fr" datatype="plaintext" original="ng2.template">

notice the source is fr. so would it be ok to have the base app language as french en then en-US would be one of the languges the app is translated to.

The way the doc is written that possibility is obscured.

more than that it's almost implied you have to work off of english :

By default, Angular uses the locale en-US, which is English as spoken in the United States of America.

but then it gets worse because you follow that up with :

To set your app's locale to another value, use the CLI parameter --configuration with the value of the locale id that you want to use:

ng serve --configuration=fr

which if you're starting out the guide as you would be (it's at the very top), does not work.

only at the very bottom is it explained how to add configs.

I'm running off of the assumption that switching the base language as I'm attempting to do is a possibility but I may just hit a wall when I'm done implementing a test and I won't be sure why. I'd like the docs to be more explicit for that reason.

the place that does put this to rest is : https://angular.io/guide/i18n#other-options with :

You can specify the base locale of your app with the parameter --i18n-locale:

ng xi18n --i18n-locale fr

but that's too far down. and not what should be indicating otherwise.

Also there is absolutely no mention of variables.

I find that bewildering but that's the case.

how do you translate this ?

<div i18n="@@myId" class="title-text">{{currentPage}}</div>

like this ?

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="myId" datatype="html">
        <source>Title 1</source>
        <target>Titre 1</target>
      </trans-unit>
      <trans-unit id="myId" datatype="html">
        <source>Help 2</source>
        <target>Aide 2</target>
      </trans-unit>
      <trans-unit id="myId" datatype="html">
        <source>New 3</source>
        <target>Nouveau 3</target>
      </trans-unit>
    </body>
  </file>
</xliff>

after running ng xi18n I got :

      <trans-unit id="9f3e56faa6da73b83f4646a1e074b970891894da" datatype="html">
        <source><x id="INTERPOLATION" equiv-text="{{currentPage}}"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/logged.in/top.bar/top.bar.component.ts</context>
          <context context-type="linenumber">85</context>
        </context-group>
        <note priority="1" from="description">the title of the current route</note>
      </trans-unit>

I don't know if this will work. but most importantly what's the syntax for adding my 6 possibilities?

also here's how I modified my configuration in angular.json :

"configurations": {
            "test-en": {
              "aot": true,
              "outputPath": "dist/en/",
              "i18nFile": "src/locale/english.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "en",
              "i18nMissingTranslation": "error"
            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "production-en": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "outputPath": "dist/my-project-en/",
              "i18nFile": "src/locale/english.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "en",
              "i18nMissingTranslation": "error"
            }
          }
        },

I don't know what's wrong but

ng serve
continues to work

ng serve --configuration=production
continues to work

ng serve --configuration=production-en
doesn't and

ng serve --configuration=test-en
doesn't.

Configuration 'test-en' could not be found in project 'web.ui'.
Error: Configuration 'test-en' could not be found in project 'web.ui'.
    at Architect.getBuilderConfiguration (C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\@angular-devkit\architect\src\architect.js:106:23)
    at MergeMapSubscriber._loadWorkspaceAndArchitect.pipe.operators_1.concatMap [as project] (C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\@angular\cli\models\architect-command.js:64:55)
    at MergeMapSubscriber._tryNext (C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\rxjs\internal\operators\mergeMap.js:122:27)
    at MergeMapSubscriber._next (C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\rxjs\internal\operators\mergeMap.js:112:18)
    at MergeMapSubscriber.Subscriber.next (C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\rxjs\internal\Subscriber.js:103:18)
    at TapSubscriber._next (C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\rxjs\internal\operators\tap.js:109:26)
    at TapSubscriber.Subscriber.next (C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\rxjs\internal\Subscriber.js:103:18)
    at MergeMapSubscriber.notifyNext (C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\rxjs\internal\operators\mergeMap.js:141:26)
    at InnerSubscriber._next (C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\rxjs\internal\InnerSubscriber.js:30:21)
    at InnerSubscriber.Subscriber.next (C:\Users\j_bard\WebstormProjects\AirConnect\web\web.ui\node_modules\rxjs\internal\Subscriber.js:103:18)

why?

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions