how to integrate Microsoft Azure Authetication in angular SPA with adal.js?

it is very common to use Azure authentication to authenticate the user access in the SPA.

it is not hard to setup a sample app running if we follow the steps below.

1. install anulgar/CLI

    npm i @angular/CLI 


2. install angular-adal

    npm i angular-adal

3 . install type definition of adal

    npm i @type/adal --save

4. install type script libary

    npm i tslib

5. finally install the microsoft-adal-angular6 package

    npm i microsoft-adal-angular6 
 
6. now you can following the example from this link

https://www.npmjs.com/package/microsoft-adal-angular6

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

AppRoutingModule,

MsAdalAngular6Module.forRoot({

tenant: 'tennat guid id from azure active directory',

clientId: 'the app id registered in the cloud',

// redirectUri: window.location.origin,

// endpoints: {

// "https://localhost/Api/": "xxx-bae6-4760-b434-xxx"

// },

navigateToLoginRequestUrl: false,

cacheLocation: 'localStorage',

})

],

providers: [AuthenticationGuard],

bootstrap: [AppComponent]

})

here is the screen shot showing the path to get the Tenant ID

you can find your app client ID from this image

actually we can find both tenant ID and client ID after you click on the MyADAuthApp 

in the app registrations section.

 now we can launch the SPA with ng-serve to run the app, and type http://localhost:4200

 it will direct to the azure authentication login screen

how to solve the TypeError: is not a function in knockout JS?

when we implement an web app with knockout JS, we encounter an issue in the page load.

we create an observable object to store an object with observable properties.

self.MyObservable=ko.observable();

self.myObject=new MyObject(){
      property1: ko.observable(),
      property2: ko.observable(),
      property3: ko.observable()
}
self.MyObservable(self.myObject);

in the method.. we have the logic to check the property1 value

then we have to access the property1 with the following code

self.MyObservable().property1()

unfortunately we encounter TypeError:property1 is not a function in chrome debugger

here is the work around to fix the error.

if (ko.isObservable(self.MyObservable().property1)) {
                        return self.MyObservable().property1();
  }

how to create a Knockout JS custom handler for duplicate email validation?

In the current Knockout JS web application, we want to validate the user input in the email field to make sure the input does not exist in our system.

i implemented the business logic in the textbox blur event. it means that the validation call to the back end when the cursor leaves the textbox.

here is snippet of code to implement binding handler in Knockout JS

ko.bindingHandlers.validateEmail = {
    init: function (element, valueAccessor, allBindingsAccessor, data, context) {
        var options = allBindingsAccessor().validateEmailParams || {};
        $(element).blur(function () {
            var customerId = options.customerID();
            var email = options.emailAddress();
            var value = valueAccessor();
            var dataModel = sci.dataModel;
            dataModel.CheckDuplicateEmail(customerId, email).then(function (response) {
                if (response != null) {
                    if (response) {
                        valueAccessor().setError(loc.DuplicateEmailMySubaruAccount);
                    }
                }
            });
        });

        return ko.bindingHandlers.value.init.apply(this, arguments);
    },
    update: ko.bindingHandlers.value.update
};

HTML Code

 <input autocomplete="off" id="email" class="form-control" type="text" data-bind="value: email,validationElement:email, validateEmail:email, validateEmailParams:{emailAddress: email, customerID:accountNumber}, attr: { placeholder: loc.Email }" />

How to embedded HTML code in the asp.net MVC resource file?

currently i am building an web application to support both English and French users.

we have a some words that already under registered trade mark My Trade Mark®. unfortuately the registered in not show in superscript.

we have to use the following HTML code to show registered trade mark in superscript.

^&reg; 

since <> have been used for open and close tag

we have use the following code to embedded HTML code in the resource file.

 <data name="MyTradeMark" xml:space="preserve">
    <value>My Trade Mark<![CDATA[^&reg;]]></value>
  </data>

in the MVC page we can use the code below to localize the text.

@Html.Raw(MVCPage_ascx.MyTradeMark)


in ASP.NET page. we just need to put this code in aspx page

<%=@MVCPage_ascx.MyTradeMark%>

How to run an old legacy Angular 2 App from the local?

Today, one of my teammate gave me a old legacy AngularJS app which is implemented
with Angluar 2. the Angular framework have been evolved into Angular 7. we usually start the project with angular/CLI. it is much easy and faster to spin up a project and make it running.


Since the legacy project is running under Angular 2,I try to migrate it to latest Angular 7. the structure and configuration is much different between the legacy AngularJs and new Angular.

I try different approaches with upgrade to lastest @angular/CLI, clear the cache. added all latest component in the node_modules folder.

unfortunately those tries were never succeed. After i check the project configuration setting in Package.json file. under Scripts section

"scripts": {

"build": "tsc -p src/",

"build:watch": "tsc -p src/ -w",

"serve": "lite-server -c=bs-config.json",

"prestart": "npm run build",

"start": "concurrently \"npm run build:watch\" \"npm run serve\"",

"lint": "tslint ./src/**/*.ts -t verbose"

},

we can use npm to manuplate the project, instead of ng serve and ng command

launch CMD Window and go to angular project

run npm install to get all the requirement components for the project.

run npm start to launch the project in the browser.


Now i can play around with this legacy App. it is a good way to start the migration. you can launch it and see how it work..

How to save your day with a simple command on existing anuglarJS with angular/CLI running on Node.JS?

Today, I got a chance to run an application that I download from Angular office website

when I run ng serve to launch the SPA web application. I got compile error immediately



i can fix it by run this command line in the CMD Windows

npm install -save/dev PackageName

It will really take time to fix all the missing package error. there is a much simple approach with the following line


npm install

this command will automatically re-install all the missing packages for the existing project.