Written by

Jayakumar Balasubramaniam

Share

  

Category

see all categories
watchdog365 Office 365 Governanance Tool

How to enable multilingual support in Angular4 using ‘ng-translate’

Google has released Angular 4, a major release after a long time. It is backward compatible with 2.x.x for most applications. Angular 4 comes with lot of new features including improvised packages, better *ngIf and *ngFor syntax, typescript 2.1 & 2.2 compatibilities, source maps for templates and much more.

Angular provides multilingual support. It can be achieved using the NPM package “ng2-translate”. Here is a detailed article on how to enable multilingual support for your Angular apps.

Angular-Multilingual

https://www.npmjs.com/package/ng2-translate

However, it is likely that you will end up facing some errors while following the above guide. In this blog post, I will share you the issues I faced myself and how I solved it. The first issue I faced is that the translation was not working at all when I ran it. And when I fixed that up, I encountered even a more challenging issue. The contents got translated but only within the current FORM. Read further to check how I got it resolved.

Issue: Translation not working when you run:

When I ran it for the first time, the translation did not work. However, I managed to resolve the issue with the following workaround.

  • Open your browsers Developer Tool Window and switch to Console window
  • You might see the error details like the one shown in the below screenshot.

Angular 4 code

Error:

Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:29 Error: (SystemJS) XHR error (404 Not Found) loading

The issue is that your ng2-translate is using “Webpack” framework to bundle all its dependency javascript files. In your config.js file we need to map the bundled ng2-translate.umd.js file like below,

map:

{'ng2-translate': './node_modules/ng2-translate/bundles/ng2-translate.umd.js'}

This should resolve the issue.

Angular is getting more popular with developers and recently rated as the second most wanted framework after Node.js. (Stack Overflow Survey) Though an Angular version 4.1 is planned to be released shortly, Google has plans to release Angular 5.0 around September which will have a lot of more exciting updates. So, let us stay tuned.

Hope you found this post useful. And most probably you encountered a similar issue and looking for solutions. If this post has resolved your issue, please do comment your experience. Also, follow our blog for similar interesting insights.

 

Jayakumar Balasubramaniam

Written by Jayakumar Balasubramaniam

A technology evangelist working on Microsoft 365, SharePoint & Azure. Gets my hands dirty with latest and greatest of SharePoint, Azure & front-end frameworks. Currently working with “Hubfly – A unified digital workplace” as a Product Engineer. Getting in to the depth of the domain & technology, with my eyes for perfection, ensures that the product releases go right every time.