Internationalization Support In Angular

Now that is simple, isn’t it? But the demo we had developed will work only for a production environment or only for the local machines. But what if we want to use the same demo in a real application? Because once our application is deployed or live on the server, we just cannot change its configurations. Well, there are certain ways by which we do the above-said task, but my personal choice will be creating separate builds for separate languages, say for example if someone wants to run the Hindi version of my application then the path would be, www.xyz.com/hi and the same case for other languages also.

So before deploying our application to the server let’s add 3 different languages button which we want to support.so modify app.component.html as shown below,

Here in the above html we added 3 anchor tag, and we are simply appending path to its respected directory using href property of anchor tag.

That’s it we are all done and now it's time to generate deployment build. We can generate a simple English build, which is a by default language using the following command.

This will generate our build deployment build inside the dist directory which we can then publish to our server.

So now again we have to generate a separate build for hindi and gujarati languages. We can do it by following commands,

So as you can see we are specifying i18n-locale parameter to Hindi (hi), we are also providing the source file location and we are setting output directory where our build should be created to dist/hi and most important parameter baseHref from where we want to serve our local language angular application.

We can run the same command for other languages.

Now our dist directory should look like this,

So now we are ready to deploy our application to github pages, but before deploying to github pages we must remove dist directory from .gitignore file.

Create the Repository

Summary