Getting started with translation in Angular 5 with ngx-translate


Ngx-translate is an internationalization (i18n) library for Angular.

Let’s see how it works in an Angular 5 project with Visual Studio code

Step 1

Download following packages:

Core package

npm install @ngx-translate/core@^9.1.1 -–save

It’s important not to use version 10 because it’s only compatible with Angular 6

If you still use the Angular 4 get the latest compatible version (7.2.2).

Http loader package

npm install @ngx-translate/http-loader --save

if you’re still on Angular <4.3, please use Http from @angular/http with http-loader@0.1.0

Step 2

Create a httpLoaderFactory that inherits from TranslateHttpLoader

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

export function httpLoaderFactory(httpClient: HttpClient): TranslateHttpLoader {
   return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');

Assets/i18n will contains json resource file for each language: [lang].json

Step 3

Create languages files:


   "APP" : {
              "TITLE" : "ngx-translate demonstration",
              "BODY" : "It works very well!"

Step 4

Setup app.module.ts by importing required modules:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { AppComponent } from './app.component';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { httpLoaderFactory } from './services/httpLoaderFactory';

   declarations: [
   imports: [
         loader: {
            provide: TranslateLoader,
            useFactory: httpLoaderFactory,
            deps: [HttpClient]
   providers: [],
   bootstrap: [AppComponent]

export class AppModule { }

Step 5

Set language to use like this in your component:

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

   styleUrls: ['./app.component.css']

export class AppComponent {

   constructor(private_translate:TranslateService) {

SetDefaultLang is used to set a fallback language when a translation isn’t found in the current language. use the lang to use, if the lang isn’t available, it will use the current loader to get them.

Build then a method that can allow to switch to another language.

Step 6

Test your app!


<div style="text-align:center">
      {{'APP.TITLE' | translate}}


Easy right ? 😉

Using OpenIdConnect with Azure AD, Angular5 and WebAPI Core: Token lifetime management



By default, tokens have a lifetime of 1h, we’ll see how to manage their lifetime.

Download Azure Active Directory Powershell module

Because there is no UI for tthis, we have to go with Powershell commands to manage our tokens and Microsoft’s session.

Go to Powershell Gallery and download the module:

Connect to your Azure account

> Connect-AzureAD -Confirm

Then type your login / password in modal.

Create a policy

If you have not set a policy yet, you have to create one with the following command:

> New-AzureADPolicy -Definition @('{"TokenLifetimePolicy":{"Version":1, "AccessTokenLifetime":"03:00:00","MaxAgeSessionSingleFactor":"24:00:00"}}') -DisplayName "WebPolicyScenario" -IsOrganizationDefault $true -Type "TokenLifetimePolicy"

AccessTokenLifetime is the duration in hours of the token with a minimum value of 10 minutes and a maximum value of 24 hours.

MaxAgeSessionSingleFactor is the duration in hours and days of the Microsoft session with a minimum value of 10 minutes and a maximum value of Until-revoked (infinite)

Get your policies

If you want to manage your policies you need to display them then identify their Id:

> Get-AzureADPolicy

Then you should see something like this:

Modify your policies

After identifying Id of the policy you want to modify, type the following command to modify the token lifetime policy and / or Microsoft session:

> Set-AzureADPolicy -Definition @('{"TokenLifetimePolicy":{"Version":1, "AccessTokenLifetime":"02:00:00","MaxAgeSessionSingleFactor":"12:00:00"}}') -Id <ObjectId of Policy> -DisplayName "WebPolicyScenario" -IsOrganizationDefault $false

Remove your policies

You can also remove your policies if you wish:

> Remove-AzureADPolicy -Id <ObjectId of Policy>


How to avoid ‘Port 4200 is already in use’ error with Angular-CLI?


If you get this error: ‘Port 4200 is already in use. Use ‘–port’ to specify a different port’, you might have left your Angular development environment without closing the node.js webserver’s port.

Here’s how you can close it without having to reboot your computer or change your application’s port.

Step 1: Find the connection’s PID

> netstat -ano | findstr :yourPortNumber

Example with its output:

Then locate the PID (surrounded in red)

Step 2: Kill the process using it’s PID

> tskill yourPID


Step 3: Restart your server

You should be able to run it (using ng serve)

Step 4: Stop your server properly

Don’t forget now to close properly your server by using Ctrl + C and typing Y:


That’s it 🙂