Internationalization in Angular

Here we come again!

Today we will learn how to implement the internationalization in angular easily and in a few steps.

Step 1: Add the necessary libraries to our package.json file.

"dependencies": {

...

"@ngx-translate/core": "8.0.0",

"@ngx-translate/http-loader": "2.0.0",

...

},

Step 2: Configure our application to use a folder of language files.

app.module.ts

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { HttpClientModule, HttpClient } from '@angular/common/http';

@NgModule({

declarations: [ AppComponent ],

imports: [

...

TranslateModule.forRoot({

loader: {

provide: TranslateLoader,

useFactory: (createTranslateLoader),

deps: [HttpClient]

}

})

...

],

providers: [ ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

export function createTranslateLoader(http: HttpClient) {

return new TranslateHttpLoader(http, './assets/i18n/', '.json');

}

Step 3: Define a component where you can change the language.

language;

languages: Language[] = [

new Language("ca","CATALÀ"),

new Language("es","ESPAÑOL"),

new Language("en","ENGLISH")

];

constructor(private route: ActivatedRoute,

private translate: TranslateService) {

var userLang = "";

this.route.queryParams.subscribe(params => {

if(!params['lang'] || params['lang'] == "") {

userLang = this.language;

} else {

userLang = params['lang'];

}

console.log("queryParams:" + userLang);

if(!userLang || userLang == "") {

userLang = navigator.language;

}

if(userLang) {

userLang = userLang.toLowerCase();

if(userLang.length > 2) {

userLang = userLang.substring(0, 2);

}

}

if(userLang == "ca" || userLang == "es" || userLang == "en") {

this.changeLanguage(userLang);

} else {

this.changeLanguage("ca");

}

});

}

public changeLanguage(language) {

console.log(language);

// canviar l'idioma per defecte usat a les traduccions

this.translate.setDefaultLang(language);

// canviar l'idioma a usar per fer les traduccions

this.translate.use(language);

// canviem l'idioma seleccionat

this.language = language;

}

@NgModule({

imports: [ ... ],

declarations: [ ... ],

exports: [ ...],

providers: [ TranslateService ]

})

Step 4: Use the Pipe translate to get the translations of the language files.

pageComponent.html

...

{{ 'field' | translate }}

...

Step 5: Create the json files with the translations.

en.json

{

"field": "traduction of my first field"

}

Here we could make all the necessary translations in our pages and components.

If we wanted that when choosing a language, the other components and pages of our application were translated, where we had loaded arrays of information, we should do the following:

Step 1: Subscribe an Observable where to load the array.

projects: Project[];

public static updateStuff: Subject<any> = new Subject();

constructor(

private projectService: ProjectService) {

ProjectsComponent.updateStuff.subscribe(res => {

// here fire functions that fetch the data from the api

this.getProjects();

});

}

ngOnInit(): void {

this.getProjects();

}

getProjects(): void {

this.projectService.getProjects()

.then(projects =>

{ this.projects = projects }

);

}

Step 2: Call the Subscription when we change the language.

import { ProjectsComponent } from '../projects/projects.component';

public changeLanguage(language) {

...

ProjectsComponent.updateStuff.next(false);

...

}

I hope you have helped the tutorial.

Any questions, do not hesitate to ask.

How to Configure Actuator in Spring Boot

Hi,

Today I'm going to explain the steps for configuring Actuator in a Rest Service Spring Boot Application.

It's very easy, only two steps and you have it!

First you have to add the dependency to the pom.xml file:

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-actuator</artifactId>
</dependency>

The second step is the disable security to the services offers by actuator.

You have to edit the application.properties file and add:

management.security.enabled=false

With this to step, you can run your appication and can call the next services:

http://localhost:8080/health for know the State of your App.

http://localhost:8080/mappings for view your Rest Services published

And you have more services, you can see in your log of your App when you run it.

Try it and have fun!

How to configure an unic properties file for Spring 4.3.3 application

Here you are!

Today I'm going to explain how to configure one or more properties files for Spring 4.3.3 application, with active profiles of Spring cofigured in the server on the run call.

You have to create a file, I named properties-context.xml with the next content:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

<beans profile="DES">
    <bean id="props" class="org.springframework.context.support.PropertySourcesPlaceholderConfigurer">
        <property name="location" value="classpath:properties/file-DES.properties"/>
    </bean>
</beans>

<beans profile="INT">
    <bean id="props" class="org.springframework.context.support.PropertySourcesPlaceholderConfigurer">
        <property name="location" value="classpath:properties/file-INT.properties"/>
    </bean>
</beans>

<beans profile="PRO">
    <bean id="props" class="org.springframework.context.support.PropertySourcesPlaceholderConfigurer">
        <property name="location" value="classpath:properties/file-PRO.properties"/>
    </bean>
</beans>

</beans>

In this file, you can see that we use three profiles={DES,INT,PRO}

This configuration will use the last Spring configuration and will be always on the last version.

The, you have to import this file to the root-context.xml file or the main configuration file of Spring.

The line you have to add id this:

<!-- properties context -->
<import resource="properties-context.xml" />

Then, for load the diferents profiles, you have to call the server with the parameter: -Dspring.profiles.active=DES.

In this call, you can use more than one active profile and will load any profiles defined in the call.

For use more than one profile you can call them like this:
-Dspring.profiles.active=DES,OTHER_PROFILE.

Also, you can load any amount of properties files changing the value of the location parameter, like this:

<property name="location" value="classpath:properties/file-DES.properties,classpath:properties/other_file-DES.properties"/>

This is the way for load properties files in Spring 4.3.3.

Try it and have fun!