Angular sample updates for MSAL Angular v4 and Angular 19 support

.pipelines/3p-e2e.yml

@@ -120,11 +120,9 @@ extends:
                         stage: "CI"
                         sourceRepo: ${{ variables.sourceRepo }}
                         sourceBranch: ${{ variables.sourceBranch }}
-                        workspace: "samples/msal-angular-v3-samples"
+                        workspace: "samples/msal-angular-samples"
                         samples:
-                            - "angular15-sample-app"
-                            - "angular16-sample-app"
-                            - "angular-b2c-sample-app"
+                            - "angular-b2c-sample"
+                            - "angular-modules-sample"
                             - "angular-standalone-sample"
-                            - "angular17-standalone-sample"
                         debug: ${{ parameters.debug }}

lib/msal-angular/FAQ.md

@@ -44,19 +44,21 @@ Please see [here](https://github.com/AzureAD/microsoft-authentication-library-fo
 
 ### What versions of Angular are supported?
 
-MSAL Angular v3 currently supports Angular 15, 16, 17 and 18.
+MSAL Angular v4 currently supports Angular 19.
+
+MSAL Angular v3 supports Angular 15, 16, 17 and 18.
 
 MSAL Angular v2 supports Angular 9, 10, 11, 12, 13 and 14.
 
 ### Does `@azure/msal-angular` support Server Side Rendering?
 
 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.
 
-**Note:** MSAL Angular currently does not officially support Angular 17 and 18's server-side and prerendering capabilities. Using SSR with MSAL Angular may break your app.
+**Note:** MSAL Angular currently does not officially support server-side and prerendering capabilities. Using SSR with MSAL Angular may break your app.
 
 ### Does `@azure/msal-angular` support standalone components?
 
-MSAL Angular v3 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-v3-samples/angular-standalone-sample) and [Angular 17 Standalone Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular17-standalone-sample)for usage details. 
+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. 
 
 ### Can `@azure/msal-angular` be used with Internet Explorer?
 
@@ -74,8 +76,6 @@ Yes, `@azure/msal-angular` can be used as a custom authentication provider for t
 
 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.
 
-Note that MSAL Angular v3 is currently in alpha and additional features and bug fixes will be added.
-
 ### What is the difference between `@azure/msal-angular` v2 and v1?
 
 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.
@@ -87,7 +87,7 @@ Please see our [v1 to v2 upgrade guide](https://github.com/AzureAD/microsoft-aut
 * [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
 * [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
 * [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
-* [Samples](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-v3-samples/angular15-sample-app/src/app/app.module.ts#L52) for examples of usage
+* [Samples](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples) for examples of usage
 
 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`. 
 
@@ -118,7 +118,7 @@ For those using the `PathLocationStrategy`, we recommend:
 - Making sure the `MsalRedirectComponent` is bootstrapped
 - Optionally: adding `MsalGuard` to all your routes if you want all your routes protected
 
-Our [Angular 15 sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular15-sample-app) demonstrates use of the `PathLocationStrategy`.
+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`.
 
 #### HashLocationStrategy
 
@@ -134,7 +134,7 @@ Our older [Angular 11 sample](https://github.com/AzureAD/microsoft-authenticatio
 
 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. 
 
-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-v3-samples/angular15-sample-app/src/app/app.component.ts#L43) for an example.
+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.
 
 ## How do I implement self-service sign-up?
 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.
@@ -149,7 +149,7 @@ Please see our [MsalGuard doc](https://github.com/AzureAD/microsoft-authenticati
 
 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.
 
-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-v3-samples/angular15-sample-app/src/app/app.component.ts#L45) for an example of this use.
+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.
 
 ### How do I get and set active accounts?
 
@@ -159,12 +159,12 @@ We recommend subscribing to the `inProgress$` observable of `MsalBroadcastServic
 
 We recommend setting the active account:
 
-- 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-v3-samples/angular15-sample-app/src/app/home/home.component.ts#L24) for an example of setting the account after a successful login.
-- 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-v3-samples/angular15-sample-app/src/app/app.component.ts#L43) for an example of checking and setting the active account on page load.
+- 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.
+- 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.
 
 **Note:** Prior to `@azure/[email protected]` active account did not persist across page loads. If you are using `@azure/[email protected]` 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.
 
-Our [Angular 15](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-v3-samples/angular15-sample-app) sample demonstrates basic usage. Your app may require more complicated logic to choose accounts.
+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.
 
 ## Errors
 

lib/msal-angular/README.md

@@ -34,6 +34,7 @@ The current `@azure/msal-angular` library improves upon the previous version and
 
 ## Guides
 
+- MSAL Angular v4 includes security updates from msal-browser. Please see the msal-browser [migration guide](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/v3-migration.md) for more details on what's changed in v4.
 - [Upgrade Guide (v2-v3)](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular/docs/v2-v3-upgrade-guide.md)
 - [Upgrade Guide (v1-v2)](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular/docs/v1-v2-upgrade-guide.md)
 - [Upgrade Guide (v0-v1)](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular/docs/v0-v1-upgrade-guide.md)
@@ -45,7 +46,8 @@ At a minimum, `@azure/msal-angular` will follow the [support schedule of the mai
 
 | MSAL Angular version | MSAL support status | Supported Angular versions |
 | -------------------- | ------------------- | -------------------------- |
-| MSAL Angular v3      | Active development  | 15, 16, 17, 18             |
+| MSAL Angular v4      | Active development  | 19                         |
+| MSAL Angular v3      | In maintenance      | 15, 16, 17, 18             |
 | MSAL Angular v2      | In maintenance      | 9, 10, 11, 12, 13, 14      |
 | MSAL Angular v1      | In maintenance      | 6, 7, 8, 9                 |
 | MSAL Angular v0      | Out of support      | 4, 5                       |
@@ -89,14 +91,20 @@ Documentation specifically for MSAL Angular v1 can be found [here](https://githu
 
 ## Samples
 
+### Current MSAL Angular Samples
+
+- [Angular B2C Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-samples/angular-b2c-sample)
+- [Angular Modules Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-samples/angular-modules-sample)
+- [Angular Standalone Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-samples/angular-standalone-sample)
+
 ### MSAL Angular v3 Samples
 
-- [Angular v15](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular15-sample-app)
-- [Angular v16](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular16-sample-app)
-- [Angular v16 B2C Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular-b2c-sample-app)
-- [Angular Standalone Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular-standalone-sample)
-- [Angular v17 Standalone Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular17-standalone-sample)
-- [Angular v18 Standalone Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular18-standalone-sample)
+- [Angular v15](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/v3-lts/samples/msal-angular-v3-samples/angular15-sample-app)
+- [Angular v16](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/v3-lts/samples/msal-angular-v3-samples/angular16-sample-app)
+- [Angular v16 B2C Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/v3-lts/samples/msal-angular-v3-samples/angular-b2c-sample-app)
+- [Angular Standalone Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/v3-lts/samples/msal-angular-v3-samples/angular-standalone-sample)
+- [Angular v17 Standalone Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/v3-lts/samples/msal-angular-v3-samples/angular17-standalone-sample)
+- [Angular v18 Standalone Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/v3-lts/samples/msal-angular-v3-samples/angular18-standalone-sample)
 
 ### MSAL Angular v2 Samples
 

lib/msal-angular/docs/angular-universal.md

@@ -4,13 +4,13 @@ Angular Universal is minimally supported in `@azure/msal-angular`. As `@azure/ms
 
 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).
 
-**Note:** MSAL Angular does not officially support Angular 17 and 18's server-side and prerendering capabilities. Using SSR with MSAL Angular may break your app.
+**Note:** MSAL Angular does not officially support server-side and prerendering capabilities. Using SSR with MSAL Angular may break your app.
 
 ## Using MSAL Angular with Angular Universal
 
 To use `@azure/msal-angular` with Angular Universal, make the following adjustments:
 
-1. Remove references to browser-only objects. Our [Angular 15 sample app](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular15-sample-app) 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.
+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.
 
     ```ts 
     this.isIframe = window !== window.parent && !window.opener; // Remove this line to use Angular Universal

lib/msal-angular/docs/configuration.md

@@ -6,7 +6,7 @@ MSAL for Angular can be configured in multiple ways:
 1. [Factory providers](#factory-providers)
 1. [`platformBrowserDynamic`](#platformbrowserdynamic)
 1. [Dynamic configurations using Factory Providers and `APP_INITIALIZER`](#dynamic-configurations-using-factory-providers-and-app_initializer)
-1. [Configurations for Angular 17 apps with standalone components](#configurations-for-angular-17-apps-with-standalone-components)
+1. [Configurations for Angular apps with standalone components](#configurations-for-angular-apps-with-standalone-components)
 
 This guide will detail how to leverage each method for your application.
 
@@ -506,11 +506,11 @@ export function MSALGuardConfigFactory(): MsalGuardConfiguration {
 }
 ```
 
-## Configurations for Angular 17 apps with standalone components
+## Configurations for Angular apps with standalone components
 
-Angular 17 and 18 applications using standalone components can be used with [factory providers](#factory-providers) as above in the `app.config.ts` file, which is then imported into `main.ts` for bootstrapping.
+Angular applications using standalone components can be used with [factory providers](#factory-providers) as above in the `app.config.ts` file, which is then imported into `main.ts` for bootstrapping.
 
-Please see our [Angular 17 Standalone Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular17-standalone-sample) for usage.
+Please see our [Angular Standalone Sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-samples/angular-standalone-sample) for usage.
 
 ```ts
 // app.config.ts