colincmac / graph-teams-angular-spa

This sample demonstrates how to use the Microsoft Graph JavaScript SDK to work with Team's from Angular single-page applications.

page_type	description	products	languages
sample	This sample demonstrates how to use the Microsoft Graph JavaScript SDK and the Microsoft Graph Toolkit to add Teams Chat to your app.	ms-graph microsoft-graph-teams-api	typescript

Microsoft Graph sample Angular app

This sample demonstrates how to use the Microsoft Graph JavaScript SDK to work with Team's from Angular single-page applications.

This sample doesn't follow Microsoft guidelines on polling (https://learn.microsoft.com/en-us/graph/api/resources/teams-api-overview?view=graph-rest-1.0#polling-requirements)

In high load scenarios, the client may be throttled polling for new Messages for a specific Chat. Delta queries aren't available for Chats (only Channels), so a (Subscription)[https://learn.microsoft.com/en-us/graph/teams-change-notification-in-microsoft-teams-overview] for change notifications and server-side webhook is necessary to get real-time updates.

This could be implemented varios ways.

• Use Serverless SignalR with Azure Functions to relay message updates in real-time using websockets. An example of this can be found in the Graph Notification Broker repository below.
• Use the Graph Notification Broker
• Incorporate the Microsoft Graph Toolkit Chat Component once it's out of Private Preview.

For more information about Graph API limits with Teams resources see:

• Microsoft Teams service throttling limits
• Set up notifications for changes in resource data
• Change notifications for Microsoft Teams resources
• Get change notifications for messages in Teams channels and chats using Microsoft Graph

Prerequisites

To run the completed project in this folder, you need the following:

• Node.js installed on your development machine. If you do not have Node.js, visit the previous link for download options. (Note: This tutorial was written with Node version 16.4.2. The steps in this guide may work with other versions, but that has not been tested.)
• Angular CLI installed on your development machine.
• Either a personal Microsoft account with a mailbox on Outlook.com, or a Microsoft work or school account.

If you don't have a Microsoft account, there are a couple of options to get a free account:

• You can sign up for a new personal Microsoft account.
• You can sign up for the Microsoft 365 Developer Program to get a free Teams subscription.

Register a web application with the Azure Active Directory admin center

1. Open a browser and navigate to the Azure Active Directory admin center. Login using a personal account (aka: Microsoft Account) or Work or School Account.

2. Select Azure Active Directory in the left-hand navigation, then select App registrations under Manage

3. Select New registration. On the Register an application page, set the values as follows.

   • Set Name to Angular Graph Sample.
   • Set Supported account types to Accounts in any organizational directory and personal Microsoft accounts.
   • Under Redirect URI, set the first drop-down to Single-page application (SPA) and set the value to http://localhost:4200.

4. Choose Register. On the Angular Graph Tutorial page, copy the value of the Application (client) ID and save it, you will need it in the next step.

Configure the sample

1. Rename the environment.example.ts file to environment.ts.

2. Edit the environment.ts file and make the following changes.

3. Replace <client-id> with the Application Id you got from the App Registration Portal.

4. Replace <tenant-id> with your provided Tenant Id.

5. In your command-line interface (CLI), navigate to this directory and run the following command to install requirements.

   npm install

Run the sample

1. Run the following command in your CLI to start the application.

   npm start

2. Open a browser and browse to http://localhost:4200.

Code of conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [e-mail] with any additional questions or comments.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.