Thank you for taking an interest in Microsoft Graph development! Please feel free to ask a question here, but keep in mind the following:

• This is not an official Microsoft support channel, and our ability to respond to questions here is limited. Questions about Graph, or questions about adding a new feature to the sample, will be answered on a best-effort basis.
• Questions should be asked on Stack Overflow.
• Issues with Microsoft Graph itself should be handled through support.

The Completed Project link is broken in the Readme.

When adding in the import below:

MsalModule.forRoot({
  clientID: OAuthSettings.appId
})

the following error is thrown:

ERROR in node_modules/@azure/msal-angular/dist/msal.module.d.ts:6:41 - error NG6005: MsalModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors.

Cheers

Hello,

getting this error while trying to run it. I guess I am missing install for OAuthSettings.
Can you help?

ERROR in src/app/auth.service.ts:9:31 - error TS2307: Cannot find module '../oauth'.

9 import { OAuthSettings } from '../oauth';
~~~~~~~~~~
src/app/app.module.ts:17:31 - error TS2307: Cannot find module '../oauth'.

17 import { OAuthSettings } from '../oauth';

Endpoint to get the thumbnail: https://graph.microsoft.com/beta/me/photo/$value

How can I use this endpoint to display the thumbnail in the Angular app.

Error occurs the moment I click on: Click here to sign in.

Once logged (the pop up to select Microsoft account does appear) in it will loop back to a logging in.

No compiler errors. Running in Edge.

Browser gives in console a TypeError: Cannot read property 'avatar' of undefined
It seems avatar is no longer a property of /me
Do we need to work it around to /me/photo?

Copied from MicrosoftDocs/feedback#968

Link to article:
https://docs.microsoft.com/en-us/graph/tutorials/angular?tutorial-step=1

Problem:

Missing
(ERROR in src/app/app.module.ts(1,27): error TS2307: Cannot find module '@ng-bootstrap/ng-bootstrap'.):

npm install --save @ng-bootstrap/ng-bootstrap

Typo

(AppRoutingModule is written twice):

imports: [ BrowserModule, AppRoutingModule AppRoutingModule, NgbModule, FontAwesomeModule ]

Should be:

imports: [ BrowserModule, AppRoutingModule, NgbModule, FontAwesomeModule ]

Typo

(In both nav-bar.component.ts and home.component.ts, tslint wants ' rather than "):

signIn(): void { 
  // Temporary this.authenticated = true; 
  this.user = { displayName: "Adele Vance", email: "[email protected]" }; 
}

Should be:

signIn(): void { 
  // Temporary this.authenticated = true; 
  this.user = { displayName: 'Adele Vance', email: '[email protected]' }; 
}

A minor point, but due to some asynchronicity you could add some *ngIf guard clauses so that displayName/avatar is only read once authService.user has been returned by the authService to get rid of these annoying console errors:

ERROR TypeError: Cannot read property 'displayName' of undefined
    at Object.eval [as updateRenderer] (HomeComponent.html:6)

ERROR TypeError: Cannot read property 'avatar' of undefined
    at Object.eval [as updateDirectives] (NavBarComponent.html:26)

core.js:4081 ERROR Error: Uncaught (in promise): ServerError: The request is not valid for the application's 'userAudience' configuration. In order to use /common/ endpoint, the application must not be configured with 'Consumer' as the user audience. The userAudience should be configured with 'All' to use /common/ endpoint.

Thank you for taking an interest in Microsoft Graph development! Please feel free to ask a question here, but keep in mind the following:

• This is not an official Microsoft support channel, and our ability to respond to questions here is limited. Questions about Graph, or questions about adding a new feature to the sample, will be answered on a best-effort basis.
• Questions should be asked on Stack Overflow.
• Issues with Microsoft Graph itself should be handled through support.