feat: upgrade to Angular 21

.eslintrc

@@ -4,7 +4,7 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "plugins": ["prefer-arrow"],
+  "plugins": [],
   "extends": ["plugin:@typescript-eslint/recommended"],
   "rules": {
     "semi": ["error", "always"],

.github/workflows/single-spa-angular.yml

@@ -34,9 +34,6 @@ jobs:
       - name: Run ESLint
         run: yarn lint
 
-      - name: Run Jest
-        run: yarn test:ci
-
       - name: Build packages
         run: yarn build
 
@@ -47,3 +44,6 @@ jobs:
         env:
           NO_UPDATE_CHECK: 1
         run: yarn test:ci:integration
+
+      - name: Run Jest
+        run: yarn test:ci

apps/chat/src/app/app.component.html

@@ -2,4 +2,4 @@ <h1 class="title is-1">This is /chat page!</h1>
 
 <button class="button" (click)="goToChatGroups()">Go to /chat/groups</button>
 
-<router-outlet></router-outlet>
+<router-outlet />

apps/chat/src/app/app.component.ts

@@ -1,11 +1,11 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'chat-root',
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [RouterOutlet],
 })
 export class AppComponent {
   constructor(private router: Router) {}

apps/chat/src/app/app.config.ts

@@ -0,0 +1,9 @@
+import { APP_BASE_HREF } from '@angular/common';
+import type { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [{ provide: APP_BASE_HREF, useValue: '/chat' }, provideRouter(routes)],
+};

apps/chat/src/app/app.routes.ts

@@ -0,0 +1,12 @@
+import type { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: 'groups',
+    loadComponent: () => import('./pages/groups/groups.component').then(m => m.GroupsComponent),
+  },
+  {
+    path: 'rooms',
+    loadComponent: () => import('./pages/rooms/rooms.component').then(m => m.RoomsComponent),
+  },
+];

apps/chat/src/app/pages/groups/groups.component.ts

@@ -5,7 +5,6 @@ import { Router } from '@angular/router';
   selector: 'chat-groups',
   templateUrl: './groups.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
 })
 export class GroupsComponent {
   constructor(private router: Router) {}

apps/chat/src/app/pages/rooms/rooms.component.ts

@@ -4,6 +4,5 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   selector: 'chat-rooms',
   templateUrl: './rooms.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
 })
 export class RoomsComponent {}

apps/chat/src/main.single-spa.ts

@@ -1,30 +1,24 @@
-import { NgZone } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { NavigationStart, Router } from '@angular/router';
-import { singleSpaAngular, getSingleSpaExtraProviders, enableProdMode } from 'single-spa-angular';
+import { getSingleSpaExtraProviders, singleSpaAngular } from 'single-spa-angular';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
 import { singleSpaPropsSubject } from './single-spa/single-spa-props';
-
-if (environment.production) {
-  enableProdMode();
-}
+import { bootstrapApplication, platformBrowser } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
 const lifecycles = singleSpaAngular({
   bootstrapFunction: async singleSpaProps => {
+    const platformRef = platformBrowser(getSingleSpaExtraProviders());
     singleSpaPropsSubject.next(singleSpaProps);
-    const ngModuleRef = await platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(
-      AppModule,
-    );
-    ngModuleRef.onDestroy(() => {
+    const appRef = await bootstrapApplication(AppComponent, appConfig, { platformRef });
+    appRef.onDestroy(() => {
       // This is used only for testing purposes.
       window.dispatchEvent(new CustomEvent('chatDestroyed'));
     });
-    return ngModuleRef;
+    return appRef;
   },
   template: '<chat-root />',
-  NgZone,
+  NgZone: 'noop',
   Router,
   NavigationStart,
 });

apps/chat/tsconfig.json

@@ -6,6 +6,9 @@
     }
   ],
   "compilerOptions": {
-    "target": "es2020"
+    "target": "es2020",
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "lib": ["dom", "es2022"]
   }
 }

apps/elements/src/main.single-spa.ts

@@ -1,27 +1,19 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { singleSpaAngularElements } from 'single-spa-angular/elements';
-import { enableProdMode, getSingleSpaExtraProviders } from 'single-spa-angular';
+import { getSingleSpaExtraProviders } from 'single-spa-angular';
 
 import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
 
 // @ts-ignore
 import unmountableStyles from './main.scss?unmountable';
-
-if (environment.production) {
-  enableProdMode();
-}
+import { platformBrowser } from '@angular/platform-browser';
 
 const lifecycles = singleSpaAngularElements({
   template: '<elements-root />',
   bootstrapFunction: async () => {
     unmountableStyles.use();
 
-    const ngModuleRef = await platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(
+    const ngModuleRef = await platformBrowser(getSingleSpaExtraProviders()).bootstrapModule(
       AppModule,
-      {
-        ngZone: 'noop',
-      },
     );
 
     ngModuleRef.onDestroy(() => unmountableStyles.unuse());

apps/elements/tsconfig.json

@@ -6,6 +6,9 @@
     }
   ],
   "compilerOptions": {
-    "target": "es2020"
+    "target": "es2020",
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "lib": ["dom", "es2022"]
   }
 }

apps/navbar/src/app/app.component.html

@@ -1,2 +1,2 @@
-<navbar-primary-nav></navbar-primary-nav>
-<router-outlet></router-outlet>
+<navbar-primary-nav />
+<router-outlet />

apps/navbar/src/app/app.component.ts

@@ -1,9 +1,12 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+import { PrimaryNavComponent } from './components/primary-nav/primary-nav.component';
 
 @Component({
   selector: 'navbar-root',
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [RouterOutlet, PrimaryNavComponent],
 })
 export class AppComponent {}

apps/navbar/src/app/app.config.ts

@@ -0,0 +1,16 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    {
+      provide: APP_BASE_HREF,
+      useValue: '/',
+    },
+
+    provideRouter(routes),
+  ],
+};

apps/navbar/src/app/app.module.ts

@@ -1,14 +1,23 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { APP_BASE_HREF } from '@angular/common';
+import { provideRouter, RouterOutlet } from '@angular/router';
 
-import { AppRoutingModule } from './app-routing.module';
+import { routes } from './app.routes';
 import { AppComponent } from './app.component';
-import { EmptyRouteComponent } from './components/empty-route/empty-route.component';
 import { PrimaryNavComponent } from './components/primary-nav/primary-nav.component';
+import { BrowserModule } from '@angular/platform-browser';
 
 @NgModule({
-  imports: [BrowserModule, AppRoutingModule],
-  declarations: [AppComponent, EmptyRouteComponent, PrimaryNavComponent],
+  providers: [
+    {
+      provide: APP_BASE_HREF,
+      useValue: '/',
+    },
+
+    provideRouter(routes),
+  ],
+  imports: [BrowserModule, RouterOutlet, PrimaryNavComponent],
+  declarations: [AppComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

apps/navbar/src/app/app.routes.ts

@@ -0,0 +1,5 @@
+import type { Routes } from '@angular/router';
+
+import { EmptyRouteComponent } from './components/empty-route/empty-route.component';
+
+export const routes: Routes = [{ path: '**', component: EmptyRouteComponent }];

apps/navbar/src/app/components/empty-route/empty-route.component.ts

@@ -3,6 +3,5 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'navbar-empty-route',
   template: '',
-  standalone: false,
 })
 export class EmptyRouteComponent {}

apps/navbar/src/app/components/primary-nav/primary-nav.component.ts

@@ -5,7 +5,6 @@ import { Router } from '@angular/router';
   selector: 'navbar-primary-nav',
   templateUrl: './primary-nav.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
 })
 export class PrimaryNavComponent {
   links = [
@@ -17,10 +16,6 @@ export class PrimaryNavComponent {
       label: 'Chat',
       url: '/chat',
     },
-    {
-      label: 'Noop zone application',
-      url: '/noop-zone',
-    },
     {
       label: 'Custom element',
       url: '/elements',
@@ -29,10 +24,6 @@ export class PrimaryNavComponent {
       label: 'Angular parcel',
       url: '/parcel',
     },
-    {
-      label: 'Angular standalone',
-      url: '/standalone',
-    },
   ];
 
   constructor(private router: Router) {}