Migrate Angular quickstart to use Standalone syntax

articles/quickstart/spa/angular/01-login.md

@@ -8,7 +8,7 @@ topics:
   - angular
   - login
 github:
-  path: Sample-01
+  path: Standalone
 contentType: tutorial
 useCase: quickstart
 ---
@@ -23,43 +23,34 @@ Visit the [Angular Authentication By Example](https://developer.auth0.com/resour
 
 <%= include('../../_includes/_auth0-angular-install') %>
 
-### Register and configure the authentication module
+### Register and providing Auth0
 
-The SDK exports `AuthModule`, a module that contains all the services required for the SDK to function. To register this with your application:
+The SDK exports `provideAuth0`, which is a provide function that contains all the services required for the SDK to function. To register this with your application:
 
-* Open the `app.module.ts` file
-* Import the `AuthModule` type from the `@auth0/auth0-angular` package
-* Add `AuthModule` to the application by calling `AuthModule.forRoot` and adding to your application module's `imports` array
+1. Open the `main.ts` file.
+2. Import the `provideAuth0` function from the `@auth0/auth0-angular` package.
+3. Add `provideAuth0` to the application by adding it to the `providers` inside `bootstrapApplication`.
+4. Inject `AuthService` into `AppComponent`.
 
 ```javascript
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideAuth0 } from '@auth0/auth0-angular';
 import { AppComponent } from './app.component';
 
-// Import the module from the SDK
-import { AuthModule } from '@auth0/auth0-angular';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-
-    // Import the module into the application, with configuration
-    AuthModule.forRoot({
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideAuth0({
       domain: '${account.namespace}',
       clientId: '${account.clientId}',
       authorizationParams: {
         redirect_uri: window.location.origin
       }
     }),
-  ],
-
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
+  ]
+});
 ```
 
-We use the [`forRoot()` pattern](https://angular.io/guide/singleton-services#the-forroot-pattern) to configure the module, which takes the properties `domain` and `clientId`; the values of these properties correspond to the "Domain" and "Client ID" values present under the "Settings" of the single-page application that you registered with Auth0. On top of that, we configure `authorizationParams.redirect_uri`, which allows Auth0 to redirect the user back to the specific URL after successfully authenticating.
+The `provideAuth0` function takes the properties `domain` and `clientId`; the values of these properties correspond to the **Domain** and **Client ID** values that you can find under **Settings** in the Single-Page Application (SPA) that you registered with Auth0. On top of that, we configure `authorizationParams.redirect_uri`, which allows Auth0 to redirect the user back to the specific URL after successfully authenticating.
 
 <%= include('../_includes/_auth_note_custom_domains') %>
 
@@ -79,7 +70,8 @@ import { AuthService } from '@auth0/auth0-angular';
 
 @Component({
   selector: 'app-auth-button',
-  template: '<button (click)="auth.loginWithRedirect()">Log in</button>'
+  template: '<button (click)="auth.loginWithRedirect()">Log in</button>',
+  standalone: true
 })
 export class AuthButtonComponent {
   // Inject the authentication service into your component through the constructor
@@ -121,7 +113,7 @@ import { DOCUMENT } from '@angular/common';
       <button (click)="auth.loginWithRedirect()">Log in</button>
     </ng-template>
   `,
-  styles: [],
+  standalone: true
 })
 export class AuthButtonComponent {
   constructor(@Inject(DOCUMENT) public document: Document, public auth: AuthService) {}
@@ -152,7 +144,8 @@ import { AuthService } from '@auth0/auth0-angular';
     <ul *ngIf="auth.user$ | async as user">
       <li>{{ user.name }}</li>
       <li>{{ user.email }}</li>
-    </ul>`
+    </ul>`,
+  standalone: true
 })
 export class UserProfileComponent {
   constructor(public auth: AuthService) {}

articles/quickstart/spa/angular/02-calling-an-api.md

@@ -8,7 +8,7 @@ topics:
   - angular
   - api
 github:
-  path: Sample-01
+  path: Standalone
 sample_download_required_data:
   - client
   - api
@@ -34,9 +34,9 @@ If you followed the [previous section where you added user log in to Angular](/q
 
 To install and configure the HTTP interceptor, perform the following steps:
 
-* Import the `AuthHttpInterceptor` type from the Auth0 Angular SDK
-* Import `HttpClientModule` and `HTTP_INTERCEPTORS` from `@angular/common/http`
-* Register `AuthHttpInterceptor` in the `providers` section of your application module
+* Import the `authHttpInterceptorFn` type from the Auth0 Angular SDK
+* Import `provideHttpClient` from `@angular/common/http`
+* Register `authHttpInterceptorFn` in `provideHttpClient` using `withInterceptors`.
 * Add configuration to specify audience, scope, and which requests should have an `Authorization` header attached automatically
 
 The following is an example of an Angular module (based upon the default implementation when you create a new app using `ng new`) that supports `AuthHttpInterceptor`, configured to call the Auth0 Management API with the ability to read the current user profile:
@@ -45,34 +45,28 @@ To begin, open your `app.module.ts` file and add the necessary imports at the to
 
 ```javascript
 // Import the injector module and the HTTP client module from Angular
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
 
 // Import the HTTP interceptor from the Auth0 Angular SDK
-import { AuthHttpInterceptor } from '@auth0/auth0-angular';
+import { authHttpInterceptorFn } from '@auth0/auth0-angular';
 ```
 
-Next, import `HttpClientModule` into the `imports` array of `AppModule`:
+Next, add `provideHttpClient` to the `providers` of the `bootstrapApplication` function, and add `authHttpInterceptorFn` using `withInterceptors`:
 
 ```javascript
-imports: [
-  HttpClientModule,
-],
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideHttpClient(withInterceptors([authHttpInterceptorFn])),
+  ]
+});
 ```
 
-Now add the Auth0 HTTP interceptor to the `providers` array of `AppModule`, like so:
-
-```javascript
-providers: [
-  { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true },
-],
-```
-
-Finally, modify the configuration given to `AuthModule.forRoot()` to specify the `audience` and `scope` values required by the API you want to call, as well as the API routes that should be intercepted by `AuthHttpInterceptor`.
+Finally, modify the configuration given to `provideAuth0()` to specify the `audience` and `scope` values required by the API you want to call, as well as the API routes that should be intercepted by `authHttpInterceptorFn`.
 
 In this case, the audience and scope for the Auth0 Management API are given, which allows your app to retrieve information about the current user.
 
 ```javascript
-AuthModule.forRoot({
+provideAuth0({
   // The domain and clientId were configured in the previous chapter
   domain: '${account.namespace}',
   clientId: '${account.clientId}',
@@ -135,7 +129,7 @@ import { AuthService } from '@auth0/auth0-angular';
   template: `<div *ngIf="metadata">
     <pre>{{ metadata | json }}</pre>
   </div>`,
-  styles: [],
+  standalone: true,
 })
 export class UserMetadataComponent implements OnInit {
   metadata = {};

articles/quickstart/spa/angular/files/index.md

@@ -1,27 +1,22 @@
 ---
-name: app.module.ts
+name: main.ts
 language: javascript
 ---
 
 ```javascript
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AuthModule } from '@auth0/auth0-angular';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideAuth0 } from '@auth0/auth0-angular';
 import { AppComponent } from './app.component';
 
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    AuthModule.forRoot({
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideAuth0({
       domain: '${account.namespace}',
       clientId: '${account.clientId}',
       authorizationParams: {
         redirect_uri: window.location.origin
       }
     }),
-  ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
+  ]
+});
 ```

articles/quickstart/spa/angular/files/login.md

@@ -9,7 +9,8 @@ import { AuthService } from '@auth0/auth0-angular';
 
 @Component({
   selector: 'app-login-button',
-  template: '<button (click)="login()">Log in</button>'
+  template: '<button (click)="login()">Log in</button>',
+  standalone: true
 })
 export class LoginButtonComponent {
   constructor(private auth: AuthService) {}

articles/quickstart/spa/angular/files/logout.md

@@ -15,6 +15,7 @@ import { DOCUMENT } from '@angular/common';
       Log out
     </button>
   `,
+  standalone: true
 })
 export class LogoutButtonComponent {
   constructor(

articles/quickstart/spa/angular/files/profile.md

@@ -13,7 +13,8 @@ import { AuthService } from '@auth0/auth0-angular';
     <ul *ngIf="auth.user$ | async as user">
       <li>{{ user.name }}</li>
       <li>{{ user.email }}</li>
-    </ul>`
+    </ul>`,
+  standalone: true
 })
 export class UserProfileComponent {
   constructor(public auth: AuthService) {}

articles/quickstart/spa/angular/interactive.md

@@ -43,16 +43,16 @@ npm install @auth0/auth0-angular
 
 The SDK exposes several types that help integrate Auth0 in an Angular application idiomatically, including a module and an authentication service.
 
-## Register and configure AuthModule {{{ data-action="code" data-code="app.module.ts#10:13" }}}
+## Register and providing Auth0 {{{ data-action="code" data-code="main.ts#9:13" }}}
 
-The SDK exports `AuthModule`, which is a module that contains all the services required for the SDK to function. To register this with your application:
+The SDK exports `provideAuth0`, which is a provide function that contains all the services required for the SDK to function. To register this with your application:
 
-1. Open the `app.module.ts` file.
-2. Import the `AuthModule` type from the `@auth0/auth0-angular` package.
-3. Add `AuthModule` to the application by calling `AuthModule.forRoot` and adding to your application module's `imports` array.
+1. Open the `main.ts` file.
+2. Import the `provideAuth0` function from the `@auth0/auth0-angular` package.
+3. Add `provideAuth0` to the application by adding it to the `providers` inside `bootstrapApplication`.
 4. Inject `AuthService` into `AppComponent`.
 
-To configure the module, we use the [`forRoot()` pattern](https://angular.io/guide/singleton-services#the-forroot-pattern), which takes the properties `domain` and `clientId`; the values of these properties correspond to the **Domain** and **Client ID** values that you can find under **Settings** in the Single-Page Application (SPA) that you registered with Auth0. On top of that, we configure `authorizationParams.redirect_uri`, which allows Auth0 to redirect the user back to the specific URL after successfully authenticating.
+The `provideAuth0` function takes the properties `domain` and `clientId`; the values of these properties correspond to the **Domain** and **Client ID** values that you can find under **Settings** in the Single-Page Application (SPA) that you registered with Auth0. On top of that, we configure `authorizationParams.redirect_uri`, which allows Auth0 to redirect the user back to the specific URL after successfully authenticating.
 
 <%= include('../_includes/_auth_note_custom_domains') %>