{"id":28524937,"url":"https://github.com/microsoftgraph/msgraph-sample-angularspa","last_synced_at":"2025-10-06T02:33:57.486Z","repository":{"id":37599505,"uuid":"160404812","full_name":"microsoftgraph/msgraph-sample-angularspa","owner":"microsoftgraph","description":"This sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from Angular single-page applications.","archived":false,"fork":false,"pushed_at":"2024-05-17T18:16:31.000Z","size":11960,"stargazers_count":64,"open_issues_count":7,"forks_count":54,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-06-09T11:13:12.892Z","etag":null,"topics":["angular","devxsample","microsoft-graph"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microsoftgraph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-04T18:57:53.000Z","updated_at":"2025-04-30T22:26:22.000Z","dependencies_parsed_at":"2024-05-17T19:29:40.200Z","dependency_job_id":"88b1d0b1-1db8-4974-8cb0-14b9e6c559d0","html_url":"https://github.com/microsoftgraph/msgraph-sample-angularspa","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/microsoftgraph/msgraph-sample-angularspa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoftgraph%2Fmsgraph-sample-angularspa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoftgraph%2Fmsgraph-sample-angularspa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoftgraph%2Fmsgraph-sample-angularspa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoftgraph%2Fmsgraph-sample-angularspa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microsoftgraph","download_url":"https://codeload.github.com/microsoftgraph/msgraph-sample-angularspa/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoftgraph%2Fmsgraph-sample-angularspa/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262520848,"owners_count":23323780,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","devxsample","microsoft-graph"],"created_at":"2025-06-09T11:12:26.804Z","updated_at":"2025-10-06T02:33:52.437Z","avatar_url":"https://github.com/microsoftgraph.png","language":"TypeScript","readme":"---\npage_type: sample\ndescription: This sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from Angular single-page applications.\nproducts:\n- ms-graph\n- office-exchange-online\nlanguages:\n- typescript\n---\n\n# Microsoft Graph sample Angular app\n\n[![Node.js CI](https://github.com/microsoftgraph/msgraph-sample-angularspa/actions/workflows/node.js.yml/badge.svg)](https://github.com/microsoftgraph/msgraph-sample-angularspa/actions/workflows/node.js.yml) ![License.](https://img.shields.io/badge/license-MIT-green.svg)\n\nThis sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from Angular single-page applications.\n\n\u003e **NOTE:** This sample was originally built from a tutorial published on the [Microsoft Graph tutorials](https://docs.microsoft.com/graph/tutorials) page. That tutorial has been removed.\n\n## Prerequisites\n\nTo run the completed project in this folder, you need the following:\n\n- [Node.js](https://nodejs.org) 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.)\n- [Angular CLI](https://cli.angular.io/) installed on your development machine.\n- Either a personal Microsoft account with a mailbox on Outlook.com, or a Microsoft work or school account.\n\nIf you don't have a Microsoft account, there are a couple of options to get a free account:\n\n- You can [sign up for a new personal Microsoft account](https://signup.live.com/signup?wa=wsignin1.0\u0026rpsnv=12\u0026ct=1454618383\u0026rver=6.4.6456.0\u0026wp=MBI_SSL_SHARED\u0026wreply=https://mail.live.com/default.aspx\u0026id=64855\u0026cbcxt=mai\u0026bk=1454618383\u0026uiflavor=web\u0026uaid=b213a65b4fdc484382b6622b3ecaa547\u0026mkt=E-US\u0026lc=1033\u0026lic=1).\n- You can [sign up for the Microsoft 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program) to get a free Office 365 subscription.\n\n## Register a web application with the Azure Active Directory admin center\n\n1. Open a browser and navigate to the [Azure Active Directory admin center](https://aad.portal.azure.com). Login using a **personal account** (aka: Microsoft Account) or **Work or School Account**.\n\n1. Select **Azure Active Directory** in the left-hand navigation, then select **App registrations** under **Manage**\n\n1. Select **New registration**. On the **Register an application** page, set the values as follows.\n\n    - Set **Name** to `Angular Graph Sample`.\n    - Set **Supported account types** to **Accounts in any organizational directory and personal Microsoft accounts**.\n    - Under **Redirect URI**, set the first drop-down to `Single-page application (SPA)` and set the value to `http://localhost:4200`.\n\n1. 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.\n\n## Configure the sample\n\n1. Rename the `oauth.example.ts` file to `oauth.ts`.\n1. Edit the `oauth.ts` file and make the following changes.\n    1. Replace `YOUR_APP_ID_HERE` with the **Application Id** you got from the App Registration Portal.\n1. In your command-line interface (CLI), navigate to this directory and run the following command to install requirements.\n\n    ```Shell\n    npm install\n    ```\n\n## Run the sample\n\n1. Run the following command in your CLI to start the application.\n\n    ```Shell\n    ng serve\n    ```\n\n1. Open a browser and browse to `http://localhost:4200`.\n\n## Code of conduct\n\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.\n\n## Disclaimer\n\n**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.**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoftgraph%2Fmsgraph-sample-angularspa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrosoftgraph%2Fmsgraph-sample-angularspa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoftgraph%2Fmsgraph-sample-angularspa/lists"}