@azure/msal-angular 4.0.13 → 4.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/IMsalService.d.ts +17 -0
  2. package/README.md +1 -1
  3. package/constants.d.ts +5 -0
  4. package/esm2020/IMsalService.mjs +6 -0
  5. package/esm2020/azure-msal-angular.mjs +5 -0
  6. package/esm2020/constants.mjs +10 -0
  7. package/esm2020/msal.broadcast.config.mjs +6 -0
  8. package/esm2020/msal.broadcast.service.mjs +66 -0
  9. package/esm2020/msal.guard.config.mjs +6 -0
  10. package/esm2020/msal.guard.mjs +218 -0
  11. package/esm2020/msal.interceptor.config.mjs +6 -0
  12. package/esm2020/msal.interceptor.mjs +270 -0
  13. package/esm2020/msal.module.mjs +46 -0
  14. package/esm2020/msal.navigation.client.mjs +53 -0
  15. package/esm2020/msal.redirect.component.mjs +31 -0
  16. package/esm2020/msal.service.mjs +88 -0
  17. package/esm2020/packageMetadata.mjs +4 -0
  18. package/esm2020/public-api.mjs +18 -0
  19. package/fesm2015/azure-msal-angular.mjs +762 -0
  20. package/fesm2015/azure-msal-angular.mjs.map +1 -0
  21. package/fesm2020/azure-msal-angular.mjs +758 -0
  22. package/fesm2020/azure-msal-angular.mjs.map +1 -0
  23. package/index.d.ts +5 -0
  24. package/msal.broadcast.config.d.ts +3 -0
  25. package/msal.broadcast.service.d.ts +19 -0
  26. package/msal.guard.config.d.ts +9 -0
  27. package/msal.guard.d.ts +43 -0
  28. package/msal.interceptor.config.d.ts +13 -0
  29. package/msal.interceptor.d.ts +70 -0
  30. package/msal.module.d.ts +13 -0
  31. package/msal.navigation.client.d.ts +19 -0
  32. package/msal.redirect.component.d.ts +15 -0
  33. package/msal.service.d.ts +33 -0
  34. package/package.json +26 -56
  35. package/packageMetadata.d.ts +2 -0
  36. package/{src/public-api.ts → public-api.d.ts} +17 -35
  37. package/.beachballrc +0 -3
  38. package/.editorconfig +0 -16
  39. package/.eslintrc.json +0 -3
  40. package/CHANGELOG.json +0 -2315
  41. package/CHANGELOG.md +0 -869
  42. package/FAQ.md +0 -182
  43. package/angular.json +0 -51
  44. package/docs/angular-universal.md +0 -64
  45. package/docs/configuration.md +0 -609
  46. package/docs/errors.md +0 -89
  47. package/docs/events.md +0 -262
  48. package/docs/initialization.md +0 -206
  49. package/docs/known-issues.md +0 -19
  50. package/docs/logging.md +0 -47
  51. package/docs/msal-guard.md +0 -208
  52. package/docs/msal-interceptor.md +0 -160
  53. package/docs/multi-tenant.md +0 -90
  54. package/docs/performance.md +0 -50
  55. package/docs/public-apis.md +0 -29
  56. package/docs/redirects.md +0 -257
  57. package/docs/security.md +0 -4
  58. package/docs/ssosilent.md +0 -84
  59. package/docs/v0-v1-upgrade-guide.md +0 -61
  60. package/docs/v1-v2-upgrade-guide.md +0 -70
  61. package/docs/v2-v3-upgrade-guide.md +0 -52
  62. package/docs/v3-v4-upgrade-guide.md +0 -36
  63. package/karma.conf.js +0 -44
  64. package/ng-package.json +0 -7
  65. package/src/IMsalService.ts +0 -34
  66. package/src/constants.ts +0 -20
  67. package/src/msal.broadcast.config.ts +0 -8
  68. package/src/msal.broadcast.service.spec.ts +0 -471
  69. package/src/msal.broadcast.service.ts +0 -84
  70. package/src/msal.guard.config.ts +0 -27
  71. package/src/msal.guard.spec.ts +0 -525
  72. package/src/msal.guard.ts +0 -290
  73. package/src/msal.interceptor.config.ts +0 -39
  74. package/src/msal.interceptor.spec.ts +0 -1168
  75. package/src/msal.interceptor.ts +0 -388
  76. package/src/msal.module.ts +0 -51
  77. package/src/msal.navigation.client.spec.ts +0 -96
  78. package/src/msal.navigation.client.ts +0 -59
  79. package/src/msal.redirect.component.spec.ts +0 -64
  80. package/src/msal.redirect.component.ts +0 -26
  81. package/src/msal.service.spec.ts +0 -468
  82. package/src/msal.service.ts +0 -104
  83. package/src/packageMetadata.ts +0 -3
  84. package/src/test.ts +0 -19
  85. package/tsconfig.json +0 -25
  86. package/tsconfig.lib.json +0 -27
  87. package/tsconfig.lib.prod.json +0 -10
  88. package/tsconfig.spec.json +0 -17
  89. package/typedoc.json +0 -10
package/FAQ.md DELETED
@@ -1,182 +0,0 @@
1
- # MSAL Angular FAQ
2
-
3
- ***
4
- **[Compatibility](#compatibility)**
5
-
6
- 1. [What browsers are supported?](#what-browsers-are-supported)
7
- 1. [What versions of Angular are supported?](#what-versions-of-angular-are-supported)
8
- 1. [Does `@azure/msal-angular` support Server Side Rendering?](#does-azuremsal-angular-support-server-side-rendering)
9
- 1. [Does `@azure/msal-angular` support standalone components?](#does-azuremsal-angular-support-standalone-components)
10
- 1. [Can `@azure/msal-angular` be used with Internet Explorer?](#can-azuremsal-angular-be-used-with-internet-explorer)
11
- 1. [Can `@azure/msal-angular` be used with Microsoft Graph JavaScript SDK?](#can-azuremsal-angular-be-used-with-microsoft-graph-javascript-sdk)
12
-
13
- **[Configuration](#configuration)**
14
-
15
- 1. [What is the difference between `@azure/msal-angular` v3 and v2?](#what-is-the-difference-between-azuremsal-angular-v3-and-v2)
16
- 1. [What is the difference between `@azure/msal-angular` v2 and v1?](#what-is-the-difference-between-azuremsal-angular-v2-and-v1)
17
- 1. [How do I add tokens to API calls?](#how-do-i-add-tokens-to-api-calls)
18
- 1. [How do I use my app with path/hash location strategy?](#how-do-i-use-my-app-with-pathhash-location-strategy)
19
- 1. [How do I make sure all events are available when using path location strategy?](#how-do-i-make-sure-all-events-are-available-when-using-path-location-strategy)
20
-
21
- **[Authentication](#authentication)**
22
-
23
- 1. [How do I log users in when they hit the application?](#how-do-i-log-users-in-when-they-hit-the-application)
24
- 1. [Why is my app looping when logging in with redirect?](#why-is-my-app-looping-when-logging-in-with-redirect)
25
- 1. [How do I implement self-service sign-up?](#how-do-i-implement-self-service-sign-up)
26
-
27
- **[Usage](#usage)**
28
-
29
- 1. [How do I secure routes?](#how-do-i-secure-routes)
30
- 1. [How do I get accounts?](#how-do-i-get-accounts)
31
- 1. [How do I get and set active accounts?](#how-do-i-get-and-set-active-accounts)
32
-
33
- **[Errors](#errors)**
34
-
35
- **[What if my question has not been answered?](#what-if-my-question-has-not-been-answered)**
36
-
37
- ***
38
-
39
- ## Compatibility
40
-
41
- ### What browsers are supported?
42
-
43
- Please see [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/FAQ.md#what-browsers-are-supported-by-msaljs) for supported browsers.
44
-
45
- ### What versions of Angular are supported?
46
-
47
- MSAL Angular v4 currently supports Angular 15, 16, 17, 18, and 19.
48
-
49
- MSAL Angular v3 supports Angular 15, 16, 17 and 18.
50
-
51
- MSAL Angular v2 supports Angular 9, 10, 11, 12, 13 and 14.
52
-
53
- ### Does `@azure/msal-angular` support Server Side Rendering?
54
-
55
- Yes, server side rendering is supported through Angular universal. See our doc [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/angular-universal.md) for more information.
56
-
57
- **Note:** MSAL Angular currently does not officially support server-side and prerendering capabilities. Using SSR with MSAL Angular may break your app.
58
-
59
- ### Does `@azure/msal-angular` support standalone components?
60
-
61
- MSAL Angular supports standalone components. Please see our [redirect documentation](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/redirects.md) for more information on using standalone components with redirects and our [standalone sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples/angular-standalone-sample) for usage details.
62
-
63
- ### Can `@azure/msal-angular` be used with Internet Explorer?
64
-
65
- MSAL Angular v3 no longer supports Internet Explorer.
66
-
67
- MSAL Angular v2 and earlier supports IE 11. More information on configuration can be found [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/msal-lts/lib/msal-angular/docs/v2-docs/ie-support.md).
68
-
69
- ### Can `@azure/msal-angular` be used with Microsoft Graph JavaScript SDK?
70
-
71
- Yes, `@azure/msal-angular` can be used as a custom authentication provider for the [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript). For an implementation, please refer to the sample: [Angular SPA calling Graph API](https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/tree/main/2-Authorization-I/1-call-graph).
72
-
73
- ## Configuration
74
-
75
- ### What is the difference between `@azure/msal-angular` v3 and v2?
76
-
77
- Please see our [v2 to v3 upgrade guide](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-v3-upgrade-guide.md) for information on the differences between `@azure/msal-angular` v3 and v2, as well as changes to watch out for when upgrading.
78
-
79
- ### What is the difference between `@azure/msal-angular` v2 and v1?
80
-
81
- Please see our [v1 to v2 upgrade guide](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v1-v2-upgrade-guide.md) for information on the differences between `@azure/msal-angular` v1 and v2, as well as changes to watch out for when upgrading.
82
-
83
- ### How do I add tokens to API calls?
84
-
85
- `@azure/msal-angular` provides the `MsalInterceptor` for obtaining tokens and adding them to HTTP requests. You may find the following links helpful:
86
-
87
- * [MsalInterceptor doc](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/msal-interceptor.md) for details on configuration and use
88
- * [Initialization doc](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/initialization.md#get-tokens-for-web-api-calls) for basic set up
89
- * [Configuration doc](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/configuration.md) for different ways to configure MSAL
90
- * [Samples](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples) for examples of usage
91
-
92
- Please note that the `MsalInterceptor` is optional. You may wish to explicitly acquire tokens using the acquireToken APIs instead. The `MsalInterceptor` is provided for your convenience and may not fit all use cases. We encourage you to write your own interceptor if you have specific needs that are not addressed by the `MsalInterceptor`.
93
-
94
- ### How do I use my app with path/hash location strategy?
95
-
96
- `@azure/msal-angular` supports both the `PathLocationStrategy` and `HashLocationStrategy`, which can be configured in the `app-routing.module.ts` of your app. See our [samples list](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/msal-lts/samples/msal-angular-v3-samples) for the routing strategy demonstrated by each sample. See the [Angular docs](https://angular.io/guide/router#locationstrategy-and-browser-url-styles) for more details on routing strategies.
97
-
98
- See [below](#how-do-i-log-users-in-when-they-hit-the-application) for additional considerations for each strategy if you are wanting to log users in on page load.
99
-
100
- ### How do I make sure all events are available when using path location strategy?
101
-
102
- There are certain situations where events emitted before a redirect are not able to be subscribed to after the redirect to a new page when using the path location strategy. An example is where an error thrown is caught by the `MsalGuard`, but the error event is not available to be subscribed to once the `MsalGuard` redirects to a `login-failed` route.
103
-
104
- The `MsalBroadcastService` has optional configurations which allow the replay of past events. This can be set to replay a number of past events, such as the events before a redirect, when subscribed to on a new page load. See our [Events documentation](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/events.md#optional-msalbroadcastservice-configurations) for configuration details.
105
-
106
- ## Authentication
107
-
108
- ### How do I log users in when they hit the application?
109
-
110
- To log your users in when they hit the application, without using a login button, **do not** call `login` in the `ngOnInit` in `app.component.ts`, as this can cause looping with redirects. Instead, we recommend setting the `MsalGuard` on your initial page, which will prompt users to log in before they reach other pages in your application. Our additional recommendations depend on your routing strategy below. Please all see our [MsalGuard doc](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/msal-guard.md) for more information.
111
-
112
- #### PathLocationStrategy
113
-
114
- For those using the `PathLocationStrategy`, we recommend:
115
- - Setting the `MsalGuard` on your initial page
116
- - Set your `redirectUri` to `'http://localhost:4200/auth'`
117
- - Adding an `'auth'` path to your routes, setting the `MsalRedirectComponent` as the component (this route should not be protected by the `MsalGuard`)
118
- - Making sure the `MsalRedirectComponent` is bootstrapped
119
- - Optionally: adding `MsalGuard` to all your routes if you want all your routes protected
120
-
121
- Our [Angular Modules Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-samples/angular-modules-sample) demonstrates use of the `PathLocationStrategy`.
122
-
123
- #### HashLocationStrategy
124
-
125
- For those using the `HashLocationStrategy`, we recommend:
126
- - Setting the `MsalGuard` on your initial page
127
- - Not setting the `MsalGuard` on placeholder routes (e.g. `/code`, `/error`)
128
- - Making sure the `MsalRedirectComponent` is bootstrapped
129
- - Optionally: adding `MsalGuard` to all your routes if you want all your routes protected
130
-
131
- Our older [Angular 11 sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/msal-lts/samples/msal-angular-v2-samples/angular11-sample-app/src/app/app-routing.module.ts) demonstrates how to protect routes with `MsalGuard` and the hash location strategy.
132
-
133
- ### Why is my app looping when logging in with redirect?
134
-
135
- One of the common reasons your app may be looping while logging in with redirects is due to improper usage of the `loginRedirect()` API. We recommend that you do not call `loginRedirect()` in the `ngOnInit` in the `app.component.ts`, as this will attempt to log in with every page load, often before any redirect has finished processing.
136
-
137
- Redirects **must** be handled either with the `MsalRedirectComponent` or with calling `handleRedirectObservable()`. See our docs on redirects [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular/docs/redirects.md) for more information. Additionally, any interaction or account validation should be done after subscribing to the `inProgress$` observable of `MsalBroadcastService` and filtering for `InteractionStatus.None`. Please see our [sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples/angular-modules-sample/src/app/app.component.ts#L43) for an example.
138
-
139
- ## How do I implement self-service sign-up?
140
- MSAL Angular supports self-service sign-up in the auth code flow. Please see our docs [here](https://azuread.github.io/microsoft-authentication-library-for-js/ref/modules/_azure_msal_browser.html#popuprequest) for supported prompt values in the request and their expected outcomes, and [here](http://aka.ms/s3u) for an overview of self-service sign-up and configuration changes that need to be made to your Azure tenant. Please note that that self-service sign-up is not available in B2C and test environments.
141
-
142
- ## Usage
143
-
144
- ### How do I secure routes?
145
-
146
- Please see our [MsalGuard doc](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/msal-guard.md) for more information about securing routes with the `MsalGuard`.
147
-
148
- ### How do I get accounts?
149
-
150
- The `@azure/msal-browser` instance used by `@azure/msal-angular` exposes multiple methods for getting account information. We recommend using `getAllAccounts()` to get all accounts, and `getAccountByHomeId()` and `getAccountByLocalId()` to get specific accounts. Note that while `getAccountByUsername()` is available, it should be a secondary choice, as it may be less reliable and is for convenience only. See the [`@azure/msal-browser` docs](https://azuread.github.io/microsoft-authentication-library-for-js/ref/classes/_azure_msal_browser.publicclientapplication.html) for more details on account methods.
151
-
152
- We recommend subscribing to the `inProgress$` observable of `MsalBroadcastService` and filtering for `InteractionStatus.None` before retrieving account information. This ensures that all interactions have completed before getting account information. See [our sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples/angular-modules-sample/src/app/app.component.ts#L45) for an example of this use.
153
-
154
- ### How do I get and set active accounts?
155
-
156
- The `msal-browser` instance exposes `getActiveAccount()` and `setActiveAccount()` for active accounts.
157
-
158
- We recommend subscribing to the `inProgress$` observable of `MsalBroadcastService` and filtering for `InteractionStatus.None` before retrieving account information with `getActiveAccount()`. This ensures that all interactions have completed before getting account information.
159
-
160
- We recommend setting the active account:
161
-
162
- - After any action that may change the account, especially if your app uses multiple accounts. See [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples/angular-modules-sample/src/app/home/home.component.ts#L24) for an example of setting the account after a successful login.
163
- - On initial page load. Wait until all interactions are complete (by subscribing to the `inProgress$` observable of `MsalBroadcastService` and filtering for `InteractionStatus.None`), check if there is an active account, and if there is none, set the active account. This could be the first account retrieved by `getAllAccounts()`, or other account selection logic required by your app. See [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples/angular-modules-sample/src/app/app.component.ts#L43) for an example of checking and setting the active account on page load.
164
-
165
- **Note:** Prior to `@azure/msal-browser@2.16.0` active account did not persist across page loads. If you are using `@azure/msal-browser@2.15.0` or earlier we recommend that you set the active account for each page load. In version 2.16.0 and above the active account will be cached in the cache location specified in your MSAL config and retrieved each time `getActiveAccount` is called.
166
-
167
- Our [Angular Modules Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples/angular-modules-sample) demonstrates basic usage. Your app may require more complicated logic to choose accounts.
168
-
169
- ## Errors
170
-
171
- If you have questions about specific errors you are receiving please see the following documents detailing some of the common errors:
172
-
173
- - [`@azure/msal-browser` error doc](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/errors.md)
174
- - [`@azure/msal-angular` error doc](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/errors.md)
175
-
176
- ## What if my question has not been answered?
177
-
178
- First check the `@azure/msal-browser` [FAQ](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/FAQ.md) to see if your question is answered there. Since `@azure/msal-angular` is a wrapper around `@azure/msal-browser` many questions you may have are answered there.
179
-
180
- If you have questions about our roadmap you can find a high level overview of planned features and releases [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/roadmap.md).
181
-
182
- If your question is not answered in this document or in the `@azure/msal-browser` FAQ you can [open an issue](https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/new/choose) and we will answer it as soon as we can.
package/angular.json DELETED
@@ -1,51 +0,0 @@
1
- {
2
- "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3
- "version": 1,
4
- "newProjectRoot": "projects",
5
- "projects": {
6
- "msal-angular": {
7
- "projectType": "library",
8
- "root": "",
9
- "sourceRoot": "src",
10
- "prefix": "lib",
11
- "architect": {
12
- "build": {
13
- "builder": "@angular-devkit/build-angular:ng-packagr",
14
- "options": {
15
- "tsConfig": "./tsconfig.lib.json",
16
- "project": "./ng-package.json"
17
- },
18
- "configurations": {
19
- "production": {
20
- "tsConfig": "./tsconfig.lib.prod.json"
21
- }
22
- }
23
- },
24
- "test": {
25
- "builder": "@angular-devkit/build-angular:karma",
26
- "options": {
27
- "main": "./src/test.ts",
28
- "tsConfig": "./tsconfig.spec.json",
29
- "karmaConfig": "./karma.conf.js",
30
- "codeCoverage": true
31
- }
32
- },
33
- "lint": {
34
- "builder": "@angular-devkit/build-angular:tslint",
35
- "options": {
36
- "tsConfig": [
37
- "./tsconfig.lib.json",
38
- "./tsconfig.spec.json"
39
- ],
40
- "exclude": [
41
- "**/node_modules/**"
42
- ]
43
- }
44
- }
45
- }
46
- }
47
- },
48
- "cli": {
49
- "analytics": false
50
- }
51
- }
@@ -1,64 +0,0 @@
1
- # Angular Universal SSR with MSAL Angular
2
-
3
- Angular Universal is minimally supported in `@azure/msal-angular`. As `@azure/msal-angular` is a wrapper library for `@azure/msal-browser`, which uses browser-only global objects such as `window` and `location` objects, not all of `@azure/msal-angular`'s features are available when using Angular Universal. While login and token acquisition is not supported server-side, Angular Universal can be used with `@azure/msal-angular` without breaking your app.
4
-
5
- Please see instructions from the [Angular docs](https://angular.io/guide/universal) on how to install Angular Universal with an existing application, and for more information on [browser-only global objects](https://angular.io/guide/universal#working-around-the-browser-apis).
6
-
7
- **Note:** MSAL Angular does not officially support server-side and prerendering capabilities. Using SSR with MSAL Angular may break your app.
8
-
9
- ## Using MSAL Angular with Angular Universal
10
-
11
- To use `@azure/msal-angular` with Angular Universal, make the following adjustments:
12
-
13
- 1. Remove references to browser-only objects. Our [Angular Modules Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-samples/angular-modules-sample) has comments next to relevant lines that should be removed to render server-side. Removing these lines will not affect the sample app if using Angular Universal.
14
-
15
- ```ts
16
- this.isIframe = window !== window.parent && !window.opener; // Remove this line to use Angular Universal
17
- ```
18
-
19
- 1. Alternatively, checks could be added before any lines that use browser-only global objects.
20
-
21
- ```ts
22
- if (typeof window !== "undefined") {
23
- this.isIframe = window !== window.parent && !window.opener;
24
- }
25
- ```
26
-
27
- 1. The same check should be added to any HTTP calls made by your app, as the `MsalInterceptor` currently uses browser-only objects. This will be addressed in a future fix. See the example below in the *profile.component.ts* from our [older MSAL Angular v2 Angular 11 sample app](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/msal-lts/samples/msal-angular-v2-samples/angular11-sample-app):
28
-
29
- ```ts
30
- export class ProfileComponent implements OnInit {
31
- profile!: ProfileType;
32
-
33
- constructor(
34
- private http: HttpClient
35
- ) { }
36
-
37
- ngOnInit() {
38
- // This check is added to ensure HTTP calls are made client-side
39
- if (typeof window !== "undefined") {
40
- this.getProfile();
41
- }
42
- }
43
-
44
- getProfile() {
45
- this.http.get(GRAPH_ENDPOINT)
46
- .subscribe(profile => {
47
- this.profile = profile;
48
- });
49
- }
50
- }
51
- ```
52
-
53
- 1. Ensure that your app is not using hash routing. The default routing strategy for the [older MSAL Angular v2 Angular 11 sample app](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/msal-lts/samples/msal-angular-v2-samples/angular11-sample-app) is hash routing, so ensure `useHash` is set to `false` in the *app-routing.module.ts*:
54
-
55
- ```ts
56
- @NgModule({
57
- imports: [RouterModule.forRoot(routes, {
58
- useHash: false,
59
- initialNavigation: 'enabled'
60
- })],
61
- exports: [RouterModule]
62
- })
63
- export class AppRoutingModule { }
64
- ```