Set baseHref for each locale

[martinmcwhorter]

🚀 feature request

Relevant Package

This feature request is for @Angular-devkit

Description

With Angular 9-rc.3 the i18n/l10n workflow is greatly improved with:

      "i18n": {
        "locales": {
          "fr-FR": "locales/messages.fr-FR.xlf",
          . . .
        }
      },

Unfortunately, if we want each locale to have a localized baseHref -- this is not supported in the improved flow.

Where in the previous "build each language" workflow we would have:

           "fr-FR": {
              "i18nLocale": "fr-FR",
              "i18nFile": "locales/messages.fr-FR.xlf",
              "outputPath": "dist/browser/fr-FR",
              "baseHref": "/fr-FR/"
            },

Describe the solution you'd like

Ideally the baseHref could/should be treated as part of the localization task. The i18n object would need to change to support this:

      "i18n": {
        "locales": {
          "fr-FR": {
              "i18nFile": "locales/messages.fr-FR.xlf",
              "baseHref": "/fr-FR/"
          },
        . . .
        }
      },

More prescriptive alternative:

      "i18n": {
        "localizedBaseHref": true,
        "locales": {
          "fr-FR": "locales/messages.fr-FR.xlf",
          . . .
        }
      },

Where if localizedBaseHref is enabled, the baseHref is prefixed with a path segment for each language, ex: /fr-FR/. So if the application baseHref is set to /foo-bar/, it would become /fr-FR/foo-bar/ for the French locale if localizedBaseHref is enabled.

Describe alternatives you've considered

The most likely workaround would be to dynamically change the baseHref in the SSR express server. This approach has other obvious advantages.

[vikerman]

You should be able to have a factory for APP_BASE_HREF that takes in the LOCALE_ID and returns the base href for that?

Something like

function localeBaseHrefFactory(locale: string) {
  return locale === 'en-US' ? '/' : `/${locale}`;
}

@NgModule({
  providers: [{provide: APP_BASE_HREF, useFactory: localeBaseHrefFactory, deps: [LOCALE_ID]}]
})
class AppModule {}

[spock123]

@vikerman that might do the trick but it's not very intuitive compared to the declarations in angular.json we could use until now.

[vikerman]

Ah - Misunderstood. Investigating.

[petebacondarwin]

I believe that @clydin is working on this right now!