Search code examples
angularngx-translateangular14

Nested translations in ngx-translate not working

I'm using ngx-translate to localize my Angular 14 app.

Since I have a lot of keys, I wanted to organize them more cleanly inside my json files, and I've read that you can use nesting in a translation file like this:

{
  "license_page": {
    "title": "License activation",
    ...
  }
}

and then use it with dot notation, like this:

<h2>{{'license_page.title'| translate}}</h2>

However, in my app this is simply not working: while translations at the top level work correctly, the ones that are nested like the example above will simply print the translation key license_page.title instead of the value.

What am I missing here? Is there some configuration required for this to work?

Solution

  • In the end, I cleared the project (including the node_modules foldera) and rebuilt from scratch, it then started working.