Angular 6 – ADAL Dynamic Parameter initialization

We have seen in the previous article, how to implement the ADAL Authentication in Angular 6.

Now we can see, how to do, for init the ADAL Module with dynamic parameter, for example we can take them from database, or json file configuration.

We must to open the app.module.ts
Search the “imports” line, where we have write:

@NgModule({
declarations: [
  AppComponent
],
imports: [
  MsAdalAngular6Module.forRoot({
  instance: 'https://adal.resource.com/',
  tenant: '',
  clientId: '',
  redirectUri: window.location.origin,
  navigateToLoginRequestUrl: false,
  cacheLocation: 'localStorage'
}),
RouterModule.forRoot(
 appRoutes,
 { enableTracing: true }
),
 BrowserModule,
],
providers: [
 AuthenticationGuard
]
});

As we can see, the parameter are static, now we want to take them from a web service.

We must to change the “forRoot” function, and pass a function that return the object with parameter configuration

@NgModule({
declarations: [
AppComponent
],
imports: [
    MsAdalAngular6Module.forRoot(function () {
      var request = new XMLHttpRequest();
      request.open('GET', '/api/getParameterADAL', false);
      request.send(null);

      if (request.status === 200) {
        console.log(request.responseText);
        var parameter = JSON.parse(request.responseText);
        return {
          instance: parameter.adfs_instance,
          tenant: parameter.adfs_tenant,
          clientId: parameter.adfs_client_id,
          redirectUri: parameter.adfs_redirect_uri,
          navigateToLoginRequestUrl: false,
          cacheLocation: 'localStorage',
        }
      }
    }()),
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
),
BrowserModule,
],
providers: [
AuthenticationGuard
]
});

If you have compile error build for example:
Function expressions are not supported in decorators in ‘ɵ0’

Build with:

ng build --optimization=true --outputHashing=a

Enjoy!

Angular 6 – ADAL Authentication

Today i want to talk to you about Microsoft ADAL (Azure Active Directory Authentication Library).
ADAL allows users to authenticate in Active Directory (AD) local or in the cloud and take token to protect the API.

How can i do to integrate it in a Angular 6 app?

1) Install the js library microsoft-adal-angular6

npm i microsoft-adal-angular6

2) Open app.component.ts
2.1) Import the microsoft adal

import { MsAdalAngular6Service } from 'microsoft-adal-angular6';

2.2) In the export class AppComponent change the constructor

export class AppComponent {
title = 'APP Title';
constructor(private adalSvc: MsAdalAngular6Service) {
console.log(this.adalSvc.userInfo);
var token = this.adalSvc.acquireToken('http://adal.resource.com').subscribe((token: string) => {
console.log(token);
});
}
}

3) Open app.module.ts
3.1) Import the microsoft adal

import { MsAdalAngular6Module, AuthenticationGuard } from 'microsoft-adal-angular6';

3.2) We must to change our routes

const appRoutes: Routes = [
{ path: '', component: AppComponent, pathMatch: 'full', canActivate: [AuthenticationGuard] }
];

3.3) In NgModule import library

@NgModule({
declarations: [
AppComponent
],
imports: [
MsAdalAngular6Module.forRoot({
instance: 'https://adal.resource.com/',
tenant: '',
clientId: '',
redirectUri: window.location.origin,
navigateToLoginRequestUrl: false,
cacheLocation: 'localStorage'
}),
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
),
BrowserModule,
],
providers: [
AuthenticationGuard
]
});

If you want an example Angular 6 ADAL App click here.

Angular 6 Material – MatDatePicker italian format dd/MM/yyyy

Material Angular is very very useful library to generate beautiful app with material design and use all the power of angular.
Today we can see how to set the format for the MatDatePicker with dd/MM/yyyy so how to customize it, then you can change it.

In our Angular 6 project we must to install moment.
So execute in our project directory:

npm i @angular/material-moment-adapter 
npm add moment

Then we must to open our
app.module.ts

//Some import before, add this 
import {
    DateAdapter,
    MAT_DATE_FORMATS,
    MAT_DATE_LOCALE
} from '@angular/material';
import {
    MomentDateModule,
    MomentDateAdapter
} from '@angular/material-moment-adapter';
//create our cost var with the information about the format that we want 
export const MY_FORMATS = {
    parse: {
        dateInput: 'DD/MM/YYYY',
    },
    display: {
        dateInput: 'DD/MM/YYYY',
        monthYearLabel: 'MM YYYY',
        dateA11yLabel: 'DD/MM/YYYY',
        monthYearA11yLabel: 'MM YYYY',
    },
};
//in our ngmodule providers add the provide for the date 
@NgModule({
    imports: [............],
    providers: [{
            provide: MAT_DATE_LOCALE,
            useValue: 'it'
        },
        //you can change
        useValue {
            provide: DateAdapter,
            useClass: MomentDateAdapter,
            deps: [MAT_DATE_LOCALE]
        }, {
            provide: MAT_DATE_FORMATS,
            useValue: MY_FORMATS
        }
    ],
    bootstrap: [AppComponent]
});
export class AppModule {}

At the end all the date in our project became with the format dd/mm/yyyy!!
Some question contact me.

Angular 6 – IE 11 method fill not supported

You have created your angular app and now you have some error about method fill, for example: “Object doesn’t support property or method ‘fill'”.
Line that fail:

var HEADER_FILLER = new Array(HEADER_OFFSET).fill(null); (Angular core).

Don’t worry the solution is easy. You must open your file on: src/polyfill.ts
At line 21 of the file you see:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/

and many “import ‘core-js/es6/BLABLA’” commented.

You must to uncomment all:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Build and fun!