Msal Angular Example

Example Angular CLI application to demonstrate https://github.com/benbaran/msal-angular .

Change Log

2.0.0 - Updated to Angular 5 and msal-angular version 2 1.0.X - Initial Angular 4 version

How this Sample was Created

1. Create the Application

npm install -g @angular/cli
ng new msal-angular-example --routing

2. Install Angular Material

npm install --save @angular/material @angular/cdk

3. Install Angular Animations and Import into app.module.ts

npm install --save @angular/animations

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})

4. Create a Material Module to Export the Needed Components

ng g module material

import {MatButtonModule, MatToolbarModule} from '@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatToolbarModule],
  exports: [MatButtonModule, MatToolbarModule]
  ...
})

5. Add Theming to Styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

6. Install Hammer.js and Import into main.ts

npm install --save hammerjs

In main.ts:

import 'hammerjs';

7. Add Material Icon Support

in index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

8. Create a Toolbar Component to Handle Login

ng g component Toolbar

9. Install msal-angular and Import into App.module.ts

npm install --save msal-angular

...
import { MsalModule } from 'msal-angular';
...

imports:
[
  ...
    [MsalModule.forRoot({
      clientID: 'eee52664-009c-4b22-9327-5aec0e623c98',
      graphScopes: ["openid"],
      signUpSignInPolicy: 'B2C_1_SiUpIn',
      tenant: 'xxx.onmicrosoft.com'
    })]
  ...
]