Angular - Use translation from outside 'assets'

Question

I need to add my translation files outside the assets directory, something like this:

src/app/custom/i18n/en.json

I am loading the translations like this:

export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './app/custom/i18n/', '.json');
}

But this doesn't work as it doesn't find the file:

GET http://localhost:8100/app/custom/i18n/en.json 404 (Not Found)

I tried to customize the angular.json file in order to be able to access files outside 'assets', doing something like this:

"assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*",
                "input": "src/app/common",
                "output": "assets"
              }
]

but I still get that 404 error. Please advise how could I set the translation to use json files from outside assets. Thank you!

Kshitij Kshitij · Accepted Answer · 2021-01-14T11:41:02

You need to specify messages file in assests array. As custom/i18n/en.json is not specified in an assets array it is not going to be bundled when you build your project. Therefore giving 404 error

"assets": [
    {
        "glob": "**/*",
        "input": "src/assets",
        "output": "assets"
    },
    {
        "glob": "**/*",
        "input": "src/app/common",
        "output": "assets"
    },
   "custom/i18n/en.json"
]

Angular - Use translation from outside 'assets'

1 Answers