Allow locale specific scripts to be added under i18n so that ng build --localize can copy them over

[sistla001]

🚀 Feature request

I should be able to add locale specific scripts or assets.

Command (mark with an x)

• [ ] new
• [ ] build
• [ ] serve
• [ ] test
• [ ] e2e
• [ ] generate
• [ ] add
• [ ] update
• [ ] lint
• [x] xi18n
• [ ] run
• [ ] config
• [ ] help
• [ ] version
• [ ] doc

Description

Currently, if you add a configuration like below and do ng build --configuration=fr,production then the specified scripts in the configuration are getting added to the output scripts.js. but doing ng build --prod --localize doesn't add them.

       "es": {
              "localize": [
                "es"
              ],
              "aot": true,
              "outputPath": "dist/dev/",
              "scripts": [
                "src/kendo/lib/kendo.messages.es-PR.js"
              ]
            },
            "fr": {
              "localize": [
                "fr"
              ],
              "aot": true,
              "outputPath": "dist/dev/",
              "scripts": [
                "src/kendo/lib/kendo.messages.fr-CA.js"
              ]
            }

It would be beneficial of such a feature exists so that I can add scripts or assets that for specific to a locale.

Describe the solution you'd like

Along with baseHref, can you please allow scripts and assets to be specified in i18n locales section so that ng build --localize and pick them up and do necessary actions?

      "i18n": {
        "locales": {
          "en": {
            "translation": "src/locale/messages.en.xlf",
            "baseHref": "/fvorder/en/",
          },
          "es": {
            "translation": "src/locale/messages.es.xlf",
            "baseHref": "/fvorder/es/",
            "script": ["src/kendo/lib/kendo.messages.es-PR.js"]

          },
          "fr": {
            "translation": "src/locale/messages.fr.xlf",
            "baseHref": "/fvorder/fr/",
            "script": ["src/kendo/lib/kendo.messages.fr-CA.js"]
          }
        }
      }

Describe alternatives you've considered

Work around: Created a script that copies these scripts to respective output language folders and rename it to some common name. Add script tag to src/index.html that references this script.

[petebacondarwin]

There is a PR to support this with the localize-translate binary: https://github.com/angular/angular/pull/33670 And I believe it is on the road map to support this in the CLI too.

cc @clydin

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[azerafati]

I wanted to add that, this could be much easier to work with if it wouldn't overwrite and just merge with extended build configs

[farokhveician]

sup 👌🏻

[dgp1130]

Hi, if I'm reading this correctly it sounds like the desire is to be able to define locale-specific scripts and set a locale-specific baseHref.

My understanding is that you can already set locales: { es: { baseHref: '/foo/es' } }, though I wasn't able to find any documentation to support that (maybe we can improve that part).

As for locale-specific scripts, our initial reaction is that they would be better expressed in the JS dependency graph rather than in Angular configuration. This way they get bundled and chunked with the rest of the application. It would also remove the need for globals / side-effectful scripts and I think could be done entirely in a library? Something like:

@Injectable()
export class MyMessageServce {
  constructor(@Inject(LOCALE_ID) localeId: string) {}

  public getMessages(): Promise<Messages> {
    switch (this.localeId) {
      case 'en': return import('./src/localized-sources/messages.en.js'),
      case 'es': return import('./src/localized-sources/messages.es.js'),
      // ...
    }
  }
}

This does require hard-coded dynamic imports (you can't easily interpolate ${localeId} because the bundler can't know what to bundle at build time), but that's more or less what you have in your configuration anyways.

It seems like the primary motivation is for Kendo messages. We're not very familiar with the way they do localization and their docs don't seem to mention those files, can anyone elaborate on what's actually in these JS files and what use case they are trying to serve?

[dgp1130]

Closing as I think the above comment covers this use case. Let us know if there are needs not being met here.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}