Ng6- HttpInterceptors - authroization token in API

Ng5- HttpInterceptors - authroization token in API
------------------------------------------------------------
Method: 1
=========
Angular Interceptors:-
Interceptors are the mechanism where we can operate on the outgoing request and the incoming response.
Setting up Interceptors:-
To set up interceptor, we need a class which will be injectable class and implementing the HttpInterceptor. When we implement this Interface, then we have a method called intercept which has the body like below.
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {}
It has two parameters "req" and "next" which are HttpRequest and HttpHandler respectively.
src/app/auth/HeaderInterceptor.ts
----------------------------------
import { Injectable } from '@angular/core' 
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/do'; 
 
@Injectable() 
export class HeaderInterceptor implements HttpInterceptor { 
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
       
        const dummyrequest = req.clone({ 
            setHeaders: { 
                'AuthKey': '12345', 'DeviceID': '85645', 
                'content-type': 'application/json',
      'Authorization': 'Bearer My-token'
            } 
        }) 
        console.log("Cloned Request"); 
        console.log(dummyrequest); 
        return next.handle(dummyrequest); 
    } 
} 

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { HttpClientModule,HTTP_INTERCEPTORS } from '@angular/common/http'; 
import {FormsModule} from '@angular/forms' 
import { AppComponent } from './app.component'; 
import {HeaderInterceptor} from './Interceptors/HeaderInterceptor' 
@NgModule({ 
  declarations: [ 
    AppComponent, 
    EmpoyeeHomeComponent 
  ], 
  imports: [ 
    BrowserModule,HttpClientModule,FormsModule 
  ], 
  providers: [EmployeeDataService, 
    { provide: HTTP_INTERCEPTORS, useClass: HeaderInterceptor, multi: true } 
   
  ], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { }
Ref: https://www.c-sharpcorner.com/article/angular-5-http-client-interceptors/

Method:2
=========

ANGULAR 5 HTTPINTERCEPTOR – ADD BEARER TOKEN TO HTTPCLIENT REQUESTS
--------------------------------------------------------------------
In this article I will describe how to add a Http Authentication Bearer token to each request done from Angular via HttpClient by implementing a Angular 5 HttpInterceptor. This way the bearer token has not be added to each request separately while doing Ajax request e.g. to a REST api. This is for example useful, if you have some api that is protected by OAuth and you have to sent a JWT token in order to get access.
app.module.ts
---------------
import { HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({

...
providers: [
...
{  provide: HTTP_INTERCEPTORS,
   useClass: CustomHttpInterceptor,
   multi: true
},
...
})

CustomHttpInterceptor.ts:
---------------------------
import { Location } from '@angular/common';
import { Injectable } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';
import { HttpRequest } from '@angular/common/http';
import { HttpHandler } from '@angular/common/http';
import { HttpEvent } from '@angular/common/http';
import { MsalService } from '../services/msal.service';
import { HttpHeaders } from '@angular/common/http';
import 'rxjs/add/observable/fromPromise';

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {
  constructor(private msalService: MsalService) {}
 
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return Observable.fromPromise(this.handleAccess(request, next));
  }

  private async handleAccess(request: HttpRequest<any>, next: HttpHandler):
      Promise<HttpEvent<any>> {
    const token = await this.msalService.getAccessToken();
    let changedRequest = request;
    // HttpHeader object immutable - copy values
    const headerSettings: {[name: string]: string | string[]; } = {};

    for (const key of request.headers.keys()) {
      headerSettings[key] = request.headers.getAll(key);
    }
    if (token) {
      headerSettings['Authorization'] = 'Bearer ' + token;
    }
    headerSettings['Content-Type'] = 'application/json';
    const newHeader = new HttpHeaders(headerSettings);

    changedRequest = request.clone({
      headers: newHeader});
    return next.handle(changedRequest).toPromise();
  }

}
option:3
==========
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpHeaders  } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class BearerTokenInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let currentToken = localStorage.getItem('AccessToken');   // get toeken from API i.e APP_INITIALIZER
    console.log(currentToken,'<---jwt token  Http Interceptors');
    if (currentToken && currentToken != null) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${currentToken}`
        }
      });
    }
    return next.handle(request);
  }
}

A couple of things to notice here. Since I’m working with async / await and I use Promises in my code and the intercept method returns an Observable, I have to convert my Promise to an Observable using the Observable.fromPromise method.

In the handleAccess method I get my access token from my msalService. This is a service for handling login / access etc. using Microsoft Authentication Library for JavaScript (In my case Azure AD B2C).

The next step is to actually add the token to the HttpClient request.

Immutable Request / RequestHeader
One very important point is, that you cannot simply set or add new headers to the request object.

The request and header objects are immutable. Even if you change something by adding a new header or trying to set some header, this will not work. This took me a while to figure out, because the api of these objects allows you to do so. But the changes you make are then not reflected in the requests you make later on

REf: https://www.illucit.com/en/angular/angular-5-httpinterceptor-add-bearer-token-to-httpclient-requests/

Ng5- APP_INITIALIZER - Run Code During App Initialization

Ng5- APP_INITIALIZER - Run Code During App Initialization
----------------------------------------------------------------------------
Before App Load excute promise for Base Url:
Method: 1
----------
import app-load as one module in app.module.ts instead iof provider with APP_INITIALIZER property
i.e
https://www.intertech.com/Blog/angular-4-tutorial-run-code-during-app-initialization/


add provider and base url Service inside app.module.ts Providers section, with APP_INITIALIZER

https://devblog.dymel.pl/2017/10/17/angular-preload/


app.module.ts
--------------
import { JokesProvider } from './JokesProvider';

export function jokesProviderFactory(provider: JokesProvider) {
  return () => provider.load();
}


 @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [
    JokesProvider,
    { provide: APP_INITIALIZER, useFactory: jokesProviderFactory, deps: [JokesProvider], multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }


JokesProvider.service.ts
------------------------
@Injectable()
export class JokesProvider {

    private joke: JokeModel = null;

    constructor(private http: Http) {

    }

    public getJoke(): JokeModel {
        return this.joke;
    }


    //option :1  call Obserabletype of Promise direct service call
    load() {
        return new Promise((resolve, reject) => {
            this.http
                .get('https://api.icndb.com/jokes/random')
                .map(res => res.json())
                .subscribe(response => {
                    this.joke = response['value'];
                    resolve(true);
                })
        })
    }
// option:2 Call directly Prmoise/Observable to load - MAke eaen faster ( create seperate service file)
this.privateService.GetData().toPromise().then(
      (response:any) => {
//expected out put / result from API

}).catch((error) =>{
      console.log(error);


app.component.ts
-----------------
@Component({
  selector: 'app-root',
  template: `
  <h1>Joke of the day:</h1>
  <p>{{jokeModel.joke}}</p>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  jokeModel: JokeModel;
 
  constructor(jokesProvider: JokesProvider) {
    this.jokeModel = jokesProvider.getJoke();
  }

  ngOnInit() {
    console.log("AppComponent: OnInit()");
  }
}

Ng5-Iframe in Angular 5componen

Ng5-Iframe in Angular 5component -

To load externa site inside Angular
================================
Angular untrust external site has to be inject inside Angualr App.
So, Sanitize and make trustable html5 iframe as truable.
Else Request mapping error  with cross script erro will throw.

method:1
--------
It will workin Chrome, firefox, IE
component.html
--------------
<iframe src="" frameborder="0" height="700" ></iframe>

component.ts
-------------
url = 'http://google.com';
    constructor(    private hostElement: ElementRef,  ) { }

ngOnInit(){
const iframe = this.hostElement.nativeElement.querySelector('iframe');
iframe.src = this.url;
}

method:2
---------
It contains, method 1 with full proper code implementation. And New soln.
template.html
--------------
<iframe src="" frameborder="0" height="700" ></iframe>
<iframe [src]="safeURL" frameborder="0" height="700" ></iframe>

component.ts
------------
import { Component, OnInit , Input, ElementRef} from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl , } from '@angular/platform-browser';

export component{
  url = 'http://google.com';
  safeURL : SafeResourceUrl;
 
    constructor(private sanitizer: DomSanitizer, private hostElement: ElementRef,) {  }
 
ngOnInit() {
    const iframe = this.hostElement.nativeElement.querySelector('iframe');   // work in chrome,FF,IE
    iframe.src = this.url;
    this.safeURL = this.sanitizer.bypassSecurityTrustResourceUrl( this.url );  //Not not workin IE
  }
}

Ref:
https://github.com/angular/angular/issues/16994  solution->juanbenitopr 

Ng6 - Upgrade from NG5- Ng6

Ng6 - Upgrade from NG5- Ng6
===========================

delete node_module folder in Exisitng NG_APP (angular 5)

Note: Node version .8.11. and above is required for NG6

NG_APP>

npm uninstall @angular/cli

npm cache verify

npm install @angular/cli@6

paste the package.json and angular.json file in DC -WEB

npm install

local run : ng serve

prod build in local ng build --prod