angularlocalizationangular-i18n

How do I build a single language version of an Angular application localized with Angular i18n


I am localizing an Angular application using the Angular i18n package.

The original language is German, and I am creating an English version.

On building the application, I get two subdirectories "de" and "en".

Right now, I want to deploy an update to the original German version, in the original root directory on the server. In this case, I will have a problem with the tag <base href="/de/"> in index.html. Obviously, I can edit this tag by hand, but I'm not very happy with that solution.

Is there a way to either

I have seen here that it is possible to specify the baseHRef for a language as "".

"i18n": {
    "sourceLocale": "en",
    "locales": {
        "sv": {
            "translation": "src/i18n/messages.sv.xlf",
            "baseHref": ""
        },
        "da": {
            "translation": "src/i18n/messages.da.xlf",
            "baseHref": ""
        }
    }
}

Theoretically, that might help me, but it only seems to be possible for localized versions, and not for the "sourceLocale".

Is there a way to specify the baseHref for the source language?

In future, I might well register a separate domain name for the English version of my application. In that case, I might never use the default structure of subdirectories.


Solution

  • I have finally figured this out

    Specifying baseHref for source locale

    Based on the example code in the original question, you can in fact specify baseHref for the sourceLocale as follows:

    "i18n": {
        "sourceLocale": {
          "code": "en",
          "baseHref": ""
        },
        "locales": {
            "sv": {
                "translation": "src/i18n/messages.sv.xlf",
                "baseHref": ""
            },
            "da": {
                "translation": "src/i18n/messages.da.xlf",
                "baseHref": ""
            }
        }
    }
    

    Specifying subPath for each locale

    For my project, there is actually a better solution.
    Instead of specifying baseHref, I can specify subPath as an empty string.

    "i18n": {
        "sourceLocale": {
            "code": "de",
            "subPath": ""
        },
        "locales": {
            "en": {
                "translation": "src/locale/messages.en.json",
                "subPath": ""
            }
        }
    },
    

    The subPath property defaults to the locale code, in my case "en" or "de". By setting it to an empty string, it does not automatically generate this subdirectory, and it sets <base href="/">.

    This is exactly what I want, because I intend to deploy my localized versions to different subdomains.

    In addition I have defined separate configurations, like this (plus some additional options):

    "production-en": {
        "localize": [ "en" ],
        "outputPath": {
            "base": "dist/my-project-name/en",
            "browser": ""
        },
    },
    "production-de": {
        "localize": [ "de" ],
        "outputPath": {
            "base": "dist/my-project-name/de",
            "browser": ""
        },
    }
    

    I am still generating a separate subdirectory for each locale, but I can copy the contents of each one to a directory on my server, mapped to a different subdomain. The "en" and "de" subdirectories will not be present on my server.

    If you do not want the option "browser": "", then I think you can specify, for example

        "outputPath":  "dist/my-project-name/en"
    

    Finally, I have defined two scripts in package.json:

        "build-en": "ng build --configuration production-en",
        "build-de": "ng build --configuration production-de",