Pr/582 continued (#618)

* Update Angular sample to use MsalAngular

* remove direct dep on msal

* pass scopes and loginType from msal-angular config into MsalProvider

* Use MsalModule.forRoot instead of injection tokens

* Remove unused values from msal-angular config

* Clean up diff

* Integrated angular app with locally built packages

* Updated client id in angular sample

* Updated  angular app readme

Co-authored-by: Matthew Haugen <[email protected]>

Author: shweaver-MSFT

lerna.json

@@ -1,5 +1,5 @@
 {
-  "packages": ["packages/*", "samples/react-app"],
+  "packages": ["packages/*", "samples/react-app", "samples/angular-app"],
   "npmClient": "yarn",
   "useWorkspaces": true,
   "version": "independent"

package.json

@@ -3,7 +3,8 @@
   "private": true,
   "workspaces": [
     "packages/*",
-    "samples/react-app"
+    "samples/react-app",
+    "samples/angular-app"
   ],
   "scripts": {
     "build": "npm run prettier:check && npm run clean && lerna run build --scope @microsoft/*",

samples/angular-app/README.md

@@ -5,11 +5,17 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 ## Getting Started
 The is the sample code explained in [A Lap Around the Mircosoft Graph Toolkit Day 14 - How to use Microsoft Graph Toolkit with Angular](https://developer.microsoft.com/en-us/graph/blogs/a-lap-around-microsoft-graph-toolkit-day-14-using-microsoft-graph-toolkit-with-angular/)
 
-1. Run `npm install` (to download all dependant npm packages)
-2. Create an Azure App Registration with the following Graph API permissions
-    * openid
-    * profile
-    * user.read
-    * calendars.read
-2. Modify src/app/app.component.ts and replace [YOUR-CLIENT-ID] with an Azure App Registration client id
-3. Run `ng serve` for a local dev server and navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+> NOTE: This sample is linked to the locally built mgt packages. If you haven't already, run `npm i -g yarn` in the root of the repo before getting started.
+
+1. In a web browser, navigate to the Azure Portal and create a new [App Registration](http://aka.ms/AppRegistrations) with the following Graph API permissions:
+    * `openid`
+    * `profile`
+    * `user.read`
+    * `calendars.read`
+1. Record the **Client Id** value for later.
+1. Open up a terminal instance at the repo root.
+1. `yarn` to download all dependant npm packages.
+1. `yarn build` to build the local mgt packages.
+1. `cd ./samples/angular-app` to navigate to the angular sample folder.
+1. Modify `src/app/app.component.ts` by replacing `[YOUR-CLIENT-ID]` with the Azure App Registration **Client Id** from earlier.
+1. Run `ng start` for a local dev server and navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

samples/angular-app/package-lock.json

@@ -19,7 +19,9 @@
     "@angular/platform-browser": "~9.1.6",
     "@angular/platform-browser-dynamic": "~9.1.6",
     "@angular/router": "~9.1.6",
-    "@microsoft/mgt": "^1.3.0",
+    "@azure/msal-angular": "^1.0.0",
+    "@microsoft/mgt": "*",
+    "@microsoft/mgt-element": "*",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

samples/angular-app/package.json

@@ -1,16 +1,18 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+import { MgtAgenda } from '@microsoft/mgt';
 
 @Component({
   selector: 'app-angular-agenda',
   templateUrl: './angular-agenda.component.html',
   styleUrls: ['./angular-agenda.component.scss']
 })
-export class AngularAgendaComponent implements OnInit {
-  @ViewChild('myagenda', {static: true}) agendaElement: any;
+export class AngularAgendaComponent implements AfterViewInit {
+  @ViewChild('myagenda', {static: true})
+  agendaElement: ElementRef<MgtAgenda>;
 
   constructor() { }
 
-  ngOnInit() {
+  ngAfterViewInit() {
     this.agendaElement.nativeElement.templateContext = {
       openWebLink: (e: any, context: { event: { webLink: string | undefined; }; }, root: any) => {
           window.open(context.event.webLink, '_blank');

samples/angular-app/src/app/angular-agenda/angular-agenda.component.ts

@@ -1,2 +1,14 @@
 <app-nav-bar></app-nav-bar>
-<app-angular-agenda *ngIf="this.isLoggedIn()"></app-angular-agenda>
+<app-angular-agenda *ngIf="this.isLoggedIn(); else: notLoggedIn"></app-angular-agenda>
+
+<ng-template #notLoggedIn>
+    <div class="container mx-auto" style="margin-top: 20px">
+        <div class="flex items-center bg-blue-500 text-white text-sm font-bold px-4 py-3" role="alert">
+            <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                <path
+                    d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z" />
+            </svg>
+            <p>You aren't logged in!.</p>
+        </div>
+    </div>
+</ng-template>

samples/angular-app/src/app/app.component.html

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { Providers, MsalProvider, TemplateHelper, ProviderState} from '@microsoft/mgt';
+import { MsalService } from '@azure/msal-angular';
+import { MsalProvider } from '@microsoft/mgt';
+import { LoginType, Providers, ProviderState, TemplateHelper } from '@microsoft/mgt-element';
+import { MSALAngularConfig } from '../environments/environment.msal';
 
 @Component({
   selector: 'app-root',
@@ -9,13 +12,19 @@ import { Providers, MsalProvider, TemplateHelper, ProviderState} from '@microsof
 export class AppComponent implements OnInit {
   title = 'demo-mgt-angular';
 
-  public isLoggedIn(){
-    return Providers.globalProvider.state === ProviderState.SignedIn;
-  }
+  constructor(msalService: MsalService) {
+    Providers.globalProvider = new MsalProvider({
+      userAgentApplication: msalService,
+      scopes: MSALAngularConfig.consentScopes,
+      loginType: MSALAngularConfig.popUp === true ? LoginType.Popup : LoginType.Redirect
+    });
 
-  ngOnInit()
-  {
-    Providers.globalProvider = new MsalProvider({ clientId: '[YOUR-CLIENT-ID]' });
     TemplateHelper.setBindingSyntax('[[', ']]');
   }
+
+  public isLoggedIn() {
+    return Providers.globalProvider.state === ProviderState.SignedIn;
+  }
+
+  public ngOnInit() {}
 }

samples/angular-app/src/app/app.component.ts

@@ -1,21 +1,17 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
-
+import { RouterModule } from '@angular/router';
+import { MsalModule } from '@azure/msal-angular';
+import { MSALAngularConfig as MsalAngularConfig, MsalConfig } from '../environments/environment.msal';
+import { AngularAgendaComponent } from './angular-agenda/angular-agenda.component';
 import { AppComponent } from './app.component';
 import { NavBarComponent } from './nav-bar/nav-bar.component';
-import { AngularAgendaComponent } from './angular-agenda/angular-agenda.component';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    NavBarComponent,
-    AngularAgendaComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
+  declarations: [AppComponent, NavBarComponent, AngularAgendaComponent],
+  imports: [BrowserModule, MsalModule.forRoot(MsalConfig, MsalAngularConfig), RouterModule.forRoot([])],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

samples/angular-app/src/app/app.module.ts

@@ -0,0 +1,26 @@
+// update these values with ones your AAD Client Id
+
+import { MsalAngularConfiguration } from '@azure/msal-angular';
+import { Configuration } from 'msal';
+
+const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
+
+export const MsalConfig: Configuration = {
+  auth: {
+    clientId: 'a974dfa0-9f57-49b9-95db-90f04ce2111a',
+    authority: 'https://login.microsoftonline.com/common/',
+    validateAuthority: true,
+    redirectUri: 'http://localhost:4200/',
+    postLogoutRedirectUri: 'http://localhost:4200/',
+    navigateToLoginRequestUrl: true
+  },
+  cache: {
+    cacheLocation: 'localStorage',
+    storeAuthStateInCookie: isIE // set to true for IE 11
+  }
+};
+
+export const MSALAngularConfig: MsalAngularConfiguration = {
+  popUp: !isIE,
+  consentScopes: ['user.read', 'openid', 'profile']
+};