Angular + @ngx-translate + Typings

Introduction

Carlos Caballero
The Startup

--

When you decide to use Angular in a project, it means that you are building a large SPA (otherwise, you should think of another framework). Large projects are usually intended for users in different countries and are carried out with translations of the application.

The library that, in my opinion,is the best to implement translation in an application belonging to Angular’s ecosystem is @ngx-translate. I have used this library since the beginning of the same because it is simple, powerful and very useful.

However, the biggest drawback that I find this library is that the translations are based on a key-value translation object in which to identify the key that you want to translate you must specify a string. The fact of using a string causes us to lose all the type control of the variables that we want to translate.

What are the problems that arise from this?

  1. We can not know if a key is lost, incomplete or has typo.
  2. We do not have autocomplete, despite having nested objects that can be complex.
  3. You can not change the name of a key automatically (refactoring) between all the languages, we must modify each file of languages one by one.

In this post we will build a small service that will allow us to considerably improve the use of @ngx-translate in our software development.

--

--

Carlos Caballero
The Startup

Hi! My name is Carlos Caballero and I’m PhD. in Computer Science from Málaga, Spain. Teaching developers and degree/master computer science how to be experts!