TypeErrors when upgrading existing angular-calendar project to Angular 18

I'm upgrading an existing project to Ionic 8 and Angular 18. The project uses the angular-calendar component and was previously working fine. In the upgraded environment I am getting following errors:

ERROR TypeError: excluded.some is not a function
getWeekViewHeader calendar-utils.js:190
Angular 47
RxJS 6
Angular 20
RxJS 47
_ref2 crud-service.ts:28
Angular 7 core.mjs:7404:22 ERROR TypeError: ctx.view is undefined
Angular 46
RxJS 6
Angular 20
RxJS 47
_ref2 crud-service.ts:28
Angular 9 core.mjs:7404:22
Angular 15
RxJS 6
Angular 20
RxJS 47
_ref2 crud-service.ts:28
Angular 21
onFinishCallback animation-eab5a4ca.js:704
afterAnimation animation-eab5a4ca.js:485
afterAnimation animation-eab5a4ca.js:484
animationFinish animation-eab5a4ca.js:500
animationFinish animation-eab5a4ca.js:502
onfinish animation-eab5a4ca.js:522
(Async: EventHandlerNonNull)
initializeWebAnimation animation-eab5a4ca.js:521
initializeAnimation animation-eab5a4ca.js:530
play animation-eab5a4ca.js:675
ZoneAwarePromise Angular
play animation-eab5a4ca.js:669
play animation-eab5a4ca.js:713
play animation-eab5a4ca.js:712
ZoneAwarePromise Angular
play animation-eab5a4ca.js:669
_ref4 overlays-e7b9d6d9.js:714
Babel 3
ZoneAwarePromise Angular
_asyncToGenerator Babel
overlayAnimation overlays-e7b9d6d9.js:696
_ref overlays-e7b9d6d9.js:530
Babel 3
ZoneAwarePromise Angular
_asyncToGenerator Babel
present overlays-e7b9d6d9.js:504
present ion-loading.entry.js:205


The main.ts file looks like this:

import { bootstrapApplication } from '@angular/platform-browser';
import { enableProdMode, importProvidersFrom } from '@angular/core';
import { AppComponent } from './app/app.component';
import { browserLocalPersistence, indexedDBLocalPersistence, provideAuth, getAuth } from '@angular/fire/auth';
import { IonicModule, isPlatform } from '@ionic/angular';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideHttpClient, HttpClient } from '@angular/common/http';
import { provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
import { ServiceWorkerModule } from '@angular/service-worker';
import { IonicStorageModule } from '@ionic/storage-angular';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { routes } from './app/app-routing.module';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { registerLocaleData } from '@angular/common';
import localeFi from '@angular/common/locales/fi';

import { firebaseConfig } from './config/app.config';

enableProdMode();

registerLocaleData(localeFi);

export function translationLoader(http: HttpClient) {
return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

bootstrapApplication(AppComponent, {
providers: [
BrowserAnimationsModule,
provideAnimations(),
provideHttpClient(),
provideFirebaseApp( () => initializeApp(firebaseConfig)),
provideAuth(() => {
const auth = getAuth();
if (isPlatform('android')) {
auth.setPersistence(indexedDBLocalPersistence);
} else {
auth.setPersistence(browserLocalPersistence);
}
return auth;
}),
provideRouter(routes, withPreloading(PreloadAllModules)),
importProvidersFrom(
IonicModule.forRoot(),
IonicStorageModule.forRoot(),
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: !isPlatform('android'),
registrationStrategy: 'registerWhenStable:30000'
}),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (translationLoader),
deps: [HttpClient]
}
}),
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory
}),
)
]
}).catch(err => console.error(err));


And the imports in the calendar.ts page:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { Location } from '@angular/common';
import { PopoverController } from '@ionic/angular';
import { Router, RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { CalendarModule } from 'angular-calendar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { PopoverCalendar } from '../popovers/popover-calendar/popover-calendar';

import { AuthService, CalendarConfigurationService, CrudService, DateTimeService, Loader, Toasts } from '../../providers';


import { Subject } from 'rxjs'



The calendar component is called in the `calendar.html` page:

<div *ngIf="calendarView && calendarConfig">
<mwl-calendar-week-view
locale="fi"
[refresh]="refresh"
[dayStartHour]="calendarConfig.dayStartHour"
[dayEndHour]="calendarConfig.dayEndHour"
[viewDate]="calendarView.date"
[weekStartsOn]="1"
[hourDuration]="60"
[hourSegments]="calendarConfig.hourSegments"
[excludeDays]="calendarConfig.excludeDays"
[events]="events"
(eventClicked)="handleEvent($event)"
(eventTimesChanged)="eventTimesChanged($event)"
>
</mwl-calendar-week-view>


How can I make the ```angular-calendar``` work for Angular 18?

Continue reading...