Example Angular CLI application to demonstrate https://github.com/benbaran/msal-angular .
2.0.0 - Updated to Angular 5 and msal-angular version 2 1.0.X - Initial Angular 4 version
- Create the Application
npm install -g @angular/cli
ng new msal-angular-example --routing
- Install Angular Material
npm install --save @angular/material @angular/cdk
- Install Angular Animations and Import into app.module.ts
npm install --save @angular/animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [BrowserAnimationsModule],
...
})
- 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]
...
})
- Add Theming to Styles.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
- Install Hammer.js and Import into main.ts
npm install --save hammerjs
In main.ts:
import 'hammerjs';
- Add Material Icon Support
in index.html:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- Create a Toolbar Component to Handle Login
ng g component Toolbar
- 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'
})]
...
]