Google released Angular 4 as a major release after a long time. It is backward compatible with 2.x.x for most applications. Angular 4 comes with a 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. 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 post, I will share 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 browser's Developer Tool Window and switch to Console window.
- You might see the error details like the one shown in the below screenshot.
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 http://localhost:50882/ng2-translate
- 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.
Hope you found this post useful. And most probably you encountered a similar issue and are looking for solutions. If this post has resolved your issue, please do share your experience. Also, follow our blog for similar interesting insights.
Angular is getting more popular with developers and was recently rated as the second most wanted framework after Node.js.