chore: upgrade Angular and related dependencies to version 15

angular.json

@@ -288,5 +288,13 @@
       },
       "tags": []
     }
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }

apps/frontend/src/app/app.module.ts

@@ -9,7 +9,6 @@ import { HttpClientModule } from '@angular/common/http'
 import { FooterComponent } from './components/footer/footer.component'
 import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome'
 import { FormsModule } from '@angular/forms'
-import { NxModule } from '@nrwl/angular'
 import { ActionReducer, Store, StoreModule } from '@ngrx/store'
 import { StoreDevtoolsModule } from '@ngrx/store-devtools'
 import { EffectsModule } from '@ngrx/effects'
@@ -20,7 +19,7 @@ import { ToastComponent } from './components/toast/toast.component'
 import { faFacebookF } from '@fortawesome/free-brands-svg-icons'
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component'
 import { LayoutModule } from '@angular/cdk/layout'
-import { APOLLO_OPTIONS } from 'apollo-angular'
+import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular'
 import { HttpLink } from 'apollo-angular/http'
 import { InMemoryCache } from '@apollo/client/core'
 import { createPersistedQueryLink } from 'apollo-angular/persisted-queries'
@@ -48,13 +47,13 @@ export const NGRX_STATE = makeStateKey('NGRX_STATE')
     FontAwesomeModule,
     FormsModule,
     LoadersModule,
-    NxModule.forRoot(),
     StoreModule.forRoot({}, { metaReducers: [stateSetter] }),
     EffectsModule.forRoot([]),
     StoreDevtoolsModule.instrument({
       maxAge: 25,
     }),
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
+    ApolloModule,
   ],
   providers: [
     {

apps/frontend/src/app/modules/canteen/services/canteen.service.spec.ts

@@ -2,19 +2,19 @@ import { TestBed } from '@angular/core/testing'
 
 import { CanteenService } from './canteen.service'
 import { of } from 'rxjs'
-import { HttpClient } from '@angular/common/http'
+import { Apollo } from 'apollo-angular'
 
-const HttpMock = {
-  get: () => of([]),
+const ApolloMock = {
+  query: () => of({ data: { w1: [], w2: [] } }),
 }
 
 describe('CanteenService', () => {
   beforeEach(() =>
     TestBed.configureTestingModule({
       providers: [
         {
-          provide: HttpClient,
-          useValue: HttpMock,
+          provide: Apollo,
+          useValue: ApolloMock,
         },
       ],
     })

apps/frontend/src/app/modules/events/reducer/events.effects.spec.ts

@@ -6,21 +6,21 @@ import { EffectsModule } from '@ngrx/effects'
 import { StoreModule } from '@ngrx/store'
 import { provideMockActions } from '@ngrx/effects/testing'
 
-import { DataPersistence, NxModule } from '@nrwl/angular'
-
 import { EventsEffects } from './events.effects'
-import { HttpClient } from '@angular/common/http'
+import { RequestService } from '../services/request.service'
 
-const httpMock = {}
+const RequestServiceMock = {
+  getEvents: () => of([]),
+}
 
 describe('EventsEffects', () => {
   const actions: Observable<any> = of({})
   let effects: EventsEffects
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [NxModule.forRoot(), StoreModule.forRoot({}), EffectsModule.forRoot([])],
-      providers: [EventsEffects, DataPersistence, provideMockActions(() => actions), { provide: HttpClient, useValue: httpMock }],
+      imports: [StoreModule.forRoot({}), EffectsModule.forRoot([])],
+      providers: [EventsEffects, provideMockActions(() => actions), { provide: RequestService, useValue: RequestServiceMock }],
     })
 
     effects = TestBed.inject(EventsEffects)

apps/frontend/src/app/modules/events/services/request.service.spec.ts

@@ -1,14 +1,17 @@
 import { TestBed } from '@angular/core/testing'
 
 import { RequestService } from './request.service'
-import { HttpClient } from '@angular/common/http'
+import { Apollo } from 'apollo-angular'
+import { of } from 'rxjs'
 
-const httpClientMock = {}
+const ApolloMock = {
+  query: () => of({ data: { events: [] } }),
+}
 
 describe('RequestService', () => {
   beforeEach(() =>
     TestBed.configureTestingModule({
-      providers: [{ provide: HttpClient, useValue: httpClientMock }],
+      providers: [{ provide: Apollo, useValue: ApolloMock }],
     })
   )
 

apps/frontend/src/app/modules/home/services/request.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core'
-import {BehaviorSubject, Observable, Subject} from 'rxjs'
+import { BehaviorSubject, Observable, Subject } from 'rxjs'
 import { Post } from '../../../models/Post'
-import {Apollo, gql, QueryRef} from "apollo-angular";
-import {map, take} from "rxjs/operators";
+import { Apollo, gql, QueryRef } from 'apollo-angular'
+import { map, take } from 'rxjs/operators'
 
 const QUERY = gql`
   query Posts($featured: Boolean, $after: String, $before: String, $first: Int, $last: Int) {
@@ -57,7 +57,12 @@ export class RequestService {
   listQuery: QueryRef<Result>
   posts?: Post[]
   pageInfo?: PageInfo
-  pageInfo$: Subject<PageInfo> = new BehaviorSubject<PageInfo>({hasPreviousPage: true, hasNextPage: false, startCursor: "", endCursor: ""})
+  pageInfo$: Subject<PageInfo> = new BehaviorSubject<PageInfo>({
+    hasPreviousPage: true,
+    hasNextPage: false,
+    startCursor: '',
+    endCursor: '',
+  })
 
   constructor(private gql: Apollo) {
     this.listQuery = this.gql.watchQuery<Result>({
@@ -66,58 +71,79 @@ export class RequestService {
         featured: false,
         last: 20,
       },
-      fetchPolicy: 'network-only'
+      fetchPolicy: 'network-only',
     })
 
-    const s = this.listQuery.valueChanges.subscribe(res => {
+    const s = this.listQuery.valueChanges.subscribe((res) => {
       this.pageInfo = res.data.posts.pageInfo
       this.pageInfo$.next(this.pageInfo)
       s.unsubscribe()
     })
   }
 
   async fetchMore() {
-    await this.listQuery.fetchMore({
+    if (!this.pageInfo) {
+      return
+    }
+
+    const result = await this.listQuery.fetchMore({
       variables: {
         last: 20,
-        before: this.pageInfo.endCursor
+        before: this.pageInfo.endCursor,
       },
-      updateQuery: (prev, { fetchMoreResult }) => {
-        this.pageInfo = fetchMoreResult.posts.pageInfo
-        this.pageInfo$.next(this.pageInfo)
+    })
 
-        return {
-          posts: {
-            edges: [...prev.posts.edges, ...fetchMoreResult.posts.edges],
-            pageInfo: fetchMoreResult.posts.pageInfo
-          }
-        }
+    if (result.data) {
+      this.pageInfo = result.data.posts.pageInfo
+      this.pageInfo$.next(this.pageInfo)
+
+      // Update cache with merged results
+      const prev = this.listQuery.getCurrentResult().data
+      if (prev) {
+        this.gql.client.cache.writeQuery({
+          query: QUERY,
+          variables: {
+            featured: false,
+            last: 20,
+          },
+          data: {
+            posts: {
+              __typename: 'PostConnection',
+              edges: [...prev.posts.edges, ...result.data.posts.edges],
+              pageInfo: result.data.posts.pageInfo,
+            },
+          },
+        })
       }
-    })
+    }
   }
 
   hasPreviousPage(): Observable<boolean> {
-    return this.pageInfo$.pipe(map(e => e.hasPreviousPage))
+    return this.pageInfo$.pipe(map((e) => e.hasPreviousPage))
   }
 
   listPosts(): Observable<Post[]> {
-    return this.listQuery.valueChanges.pipe(map(res => {
-      return res.data.posts.edges.map(edge => edge.node)
-    }))
+    return this.listQuery.valueChanges.pipe(
+      map((res) => {
+        return res.data.posts.edges.map((edge) => edge.node)
+      })
+    )
   }
 
   listFeaturedPosts(): Observable<Post[]> {
-    return this.gql.query<Result>({
-      query: QUERY,
-      variables: {
-        featured: true,
-        last: 20
-      }
-    }).pipe(
-      map(res => {
-        return res.data.posts.edges.map(edge => edge.node)
-      }),
-      take(1)
-    )
+    return this.gql
+      .query<Result>({
+        query: QUERY,
+        variables: {
+          featured: true,
+          last: 20,
+        },
+      })
+      .pipe(
+        map((res) => {
+          return res.data.posts.edges.map((edge) => edge.node)
+        }),
+        take(1)
+      )
   }
 }

apps/frontend/src/app/modules/misc/reducer/colleagues/colleagues.effects.spec.ts

@@ -6,8 +6,6 @@ import { EffectsModule } from '@ngrx/effects'
 import { StoreModule } from '@ngrx/store'
 import { provideMockActions } from '@ngrx/effects/testing'
 
-import { DataPersistence, NxModule } from '@nrwl/angular'
-
 import { ColleaguesEffects } from './colleagues.effects'
 import { ColleaguesService } from '../../services/colleagues.service'
 
@@ -23,10 +21,9 @@ describe('ColleaguesEffects', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [NxModule.forRoot(), StoreModule.forRoot({}), EffectsModule.forRoot([])],
+      imports: [StoreModule.forRoot({}), EffectsModule.forRoot([])],
       providers: [
         ColleaguesEffects,
-        DataPersistence,
         provideMockActions(() => actions),
         {
           provide: ColleaguesService,

apps/frontend/src/app/modules/misc/services/colleagues.service.spec.ts

@@ -2,19 +2,19 @@ import { TestBed } from '@angular/core/testing'
 
 import { ColleaguesService } from './colleagues.service'
 import { of } from 'rxjs'
-import { HttpClient } from '@angular/common/http'
+import { Apollo } from 'apollo-angular'
 
-const HttpMock = {
-  get: () => of([]),
+const ApolloMock = {
+  query: () => of({ data: { colleagues: [] } }),
 }
 
 describe('ColleaguesService', () => {
   beforeEach(() => {
     return TestBed.configureTestingModule({
       providers: [
         {
-          provide: HttpClient,
-          useValue: HttpMock,
+          provide: Apollo,
+          useValue: ApolloMock,
         },
       ],
     })

apps/frontend/src/main.ts

@@ -4,23 +4,12 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 import { AppModule } from './app/app.module'
 import { environment } from './environments/environment'
 
-import { hmrBootstrap } from './hmr'
-
 if (environment.production) {
   enableProdMode()
 }
 
-const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule)
-
-if (environment.hmr) {
-  if (module['hot']) {
-    hmrBootstrap(module, bootstrap)
-  } else {
-    console.error('HMR is not enabled for webpack-dev-server!')
-    console.log('Are you using the --hmr flag for ng serve?')
-  }
-} else {
-  document.addEventListener('DOMContentLoaded', () => {
-    bootstrap().catch((err) => console.log(err))
-  })
-}
+document.addEventListener('DOMContentLoaded', () => {
+  platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .catch((err) => console.error(err))
+})

apps/frontend/src/polyfills.ts

@@ -62,7 +62,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone' // Included with Angular CLI.
+import 'zone.js' // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

apps/frontend/src/test.ts

@@ -1,16 +1,11 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone-testing'
+import 'zone.js'
+import 'zone.js/testing'
 import { getTestBed } from '@angular/core/testing'
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'
 
-declare const require: any
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
   teardown: { destroyAfterEach: false },
 })
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/)
-// And load the modules.
-context.keys().map(context)

libs/calendar/src/test.ts

@@ -1,18 +1,11 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone'
-
-import 'zone.js/dist/zone-testing'
+import 'zone.js'
+import 'zone.js/testing'
 import { getTestBed } from '@angular/core/testing'
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'
 
-declare const require: any
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
   teardown: { destroyAfterEach: false },
 })
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/)
-// And load the modules.
-context.keys().map(context)