feat: upgrade to Angular 21 (#556)

Author: arturovt

.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-routing.module.ts

@@ -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.html

@@ -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.component.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.config.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/app.module.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) {}