fix: remove @angular/animations and @angular/platform-browser-dynamic

package.json

@@ -25,12 +25,10 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.3.28",
     "@angular/common": "^20.3.28",
     "@angular/compiler": "^20.3.28",
     "@angular/core": "^20.3.28",
     "@angular/platform-browser": "^20.3.28",
-    "@angular/platform-browser-dynamic": "^20.3.28",
     "@angular/router": "^20.3.28",
     "@auth0/auth0-spa-js": "^2.24.1",
     "rxjs": "^6.6.7",

projects/playground/src/app/app.component.spec.ts

@@ -31,8 +31,7 @@ describe('AppComponent', () => {
     } as any;
 
     TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      imports: [RouterTestingModule, ReactiveFormsModule],
+      imports: [AppComponent, RouterTestingModule, ReactiveFormsModule],
       providers: [
         {
           provide: AuthService,

projects/playground/src/app/app.component.ts

@@ -1,17 +1,37 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';
+import {
+  UntypedFormGroup,
+  UntypedFormControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
 import { AuthService } from '../../../auth0-angular/src/lib/auth.service';
 import { iif } from 'rxjs';
 import { first } from 'rxjs/operators';
-import { DOCUMENT } from '@angular/common';
+import {
+  AsyncPipe,
+  DOCUMENT,
+  JsonPipe,
+  NgIf,
+  UpperCasePipe,
+} from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { LogoutOptions } from 'projects/auth0-angular/src/lib/interfaces';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  standalone: false,
+  standalone: true,
+  imports: [
+    NgIf,
+    AsyncPipe,
+    JsonPipe,
+    UpperCasePipe,
+    ReactiveFormsModule,
+    RouterLink,
+    RouterOutlet,
+  ],
 })
 export class AppComponent implements OnInit {
   isAuthenticated$ = this.auth.isAuthenticated$;

projects/playground/src/app/app.config.ts

@@ -0,0 +1,36 @@
+import { ApplicationConfig, APP_INITIALIZER } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import {
+  HTTP_INTERCEPTORS,
+  HttpClient,
+  HttpBackend,
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
+import { provideAuth0 } from 'projects/auth0-angular/src/public-api';
+import { AuthHttpInterceptor } from 'projects/auth0-angular/src/lib/auth.interceptor';
+import { AuthClientConfig } from 'projects/auth0-angular/src/lib/auth.config';
+import { routes } from './app.routes';
+
+const configInitializer =
+  (handler: HttpBackend, config: AuthClientConfig): (() => Promise<any>) =>
+  () =>
+    new HttpClient(handler)
+      .get('/assets/config.json')
+      .toPromise()
+      .then((loadedConfig: any) => config.set(loadedConfig));
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideAuth0(),
+    {
+      provide: APP_INITIALIZER,
+      useFactory: configInitializer,
+      deps: [HttpBackend, AuthClientConfig],
+      multi: true,
+    },
+    { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true },
+    provideHttpClient(withInterceptorsFromDi()),
+  ],
+};

projects/playground/src/app/app-routing.module.ts → projects/playground/src/app/app.routes.ts

@@ -1,13 +1,12 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { ProtectedComponent } from './components/protected.component';
+import { Routes } from '@angular/router';
 import { AuthGuard } from 'projects/auth0-angular/src/lib/auth.guard';
+import { ProtectedComponent } from './components/protected.component';
 import { UnprotectedComponent } from './components/unprotected.component';
 import { ChildRouteComponent } from './components/child-route.component';
 import { NestedChildRouteComponent } from './components/nested-child-route.component';
 import { ErrorComponent } from './components/error.component';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     path: '',
     component: UnprotectedComponent,
@@ -26,18 +25,14 @@ const routes: Routes = [
   },
   {
     path: 'lazy',
-    canLoad: [AuthGuard],
-    loadChildren: () =>
-      import('./lazy-module.module').then((m) => m.LazyModuleModule),
+    canActivate: [AuthGuard],
+    loadComponent: () =>
+      import('./components/lazy-module.component').then(
+        (m) => m.LazyModuleComponent
+      ),
   },
   {
     path: 'error',
     component: ErrorComponent,
   },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}

projects/playground/src/app/components/child-route.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-child-route',
@@ -8,6 +9,7 @@ import { Component } from '@angular/core';
     <router-outlet></router-outlet>
   `,
   styles: [],
-  standalone: false,
+  standalone: true,
+  imports: [RouterOutlet],
 })
 export class ChildRouteComponent {}

projects/playground/src/app/components/error.component.ts

@@ -4,6 +4,6 @@ import { Component, OnInit } from '@angular/core';
   selector: 'app-error',
   template: '<p data-cy="error">Error!</p>',
   styles: [],
-  standalone: false,
+  standalone: true,
 })
 export class ErrorComponent {}

projects/playground/src/app/components/lazy-module.component.ts

@@ -4,6 +4,6 @@ import { Component } from '@angular/core';
   selector: 'app-lazy-module',
   template: '<p data-cy="lazy-module">lazy-module works!</p>',
   styles: [],
-  standalone: false,
+  standalone: true,
 })
 export class LazyModuleComponent {}

projects/playground/src/app/components/nested-child-route.component.ts

@@ -4,6 +4,6 @@ import { Component } from '@angular/core';
   selector: 'app-nested-child-route',
   template: ` <p data-cy="nested-child-route">Nested child-route works!</p> `,
   styles: [],
-  standalone: false,
+  standalone: true,
 })
 export class NestedChildRouteComponent {}

projects/playground/src/app/components/protected.component.ts

@@ -4,6 +4,6 @@ import { Component } from '@angular/core';
   selector: 'app-protected',
   template: '<p data-cy="protected">This route is protected!</p>',
   styles: [],
-  standalone: false,
+  standalone: true,
 })
 export class ProtectedComponent {}

projects/playground/src/app/components/unprotected.component.ts

@@ -4,6 +4,6 @@ import { Component } from '@angular/core';
   selector: 'app-unprotected',
   template: '<p data-cy="unprotected">This route is unprotected!</p>',
   styles: [],
-  standalone: false,
+  standalone: true,
 })
 export class UnprotectedComponent {}

projects/playground/src/main.ts

@@ -1,12 +1,7 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err)
+);