ng add fails with standalone application

[RronKurtishi]

Describe the bug
ng add angular-calendar fails when trying to add module imports in Angular 17 as it is standalone by default.

For a standalone app, imports should be added inside the providers array in app.config.ts file using importProvidersFrom:

    importProvidersFrom(
      CalendarModule.forRoot({
        provide: DateAdapter,
        useFactory: adapterFactory,
      })
    )

Versions

• @angular/core: ^17.0.0
• angular-calendar: ^0.31.0
• Browser name and version: all

[matts-bot]

Thanks so much for opening an issue! If you'd like to support this project, then please consider sponsoring me

[sambyte61]

@RronKurtishi I was struggling with this same issue for a while. Your solution works for me too.

Also worth noting that you need to import importProvidersFrom from @angular/core.

import { importProvidersFrom } from '@angular/core';

[mreis1]

Full reference in case someone needs it.

app.config.ts

import {ApplicationConfig, importProvidersFrom, provideZoneChangeDetection} from '@angular/core';
import {provideRouter} from '@angular/router';

import {routes} from './app.routes';
import {CalendarModule, DateAdapter} from 'angular-calendar';
import {adapterFactory} from 'angular-calendar/date-adapters/date-fns';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({eventCoalescing: true}),
    provideRouter(routes),
    importProvidersFrom(
      // CalModule
      CalendarModule.forRoot({
        provide: DateAdapter,
        useFactory: adapterFactory
      })
    )]
};

app-basic-calendar.component.ts

import {ChangeDetectionStrategy, Component} from '@angular/core';
import {CalendarEvent, CalendarModule} from 'angular-calendar';

@Component({
  selector: 'app-basic-calendar',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    CalendarModule,
  ],
  template: `
    <mwl-calendar-day-view [viewDate]="viewDate" [events]="events"
                           (hourSegmentClicked)="handleEvent($event, 'hoursegment')"
                           (eventClicked)="handleEvent($event, 'event')"
                           >
    </mwl-calendar-day-view>`,
  styleUrl: './basic-calendar.component.scss'
})
export class BasicCalendarComponent {
  viewDate: Date = new Date();

  events: CalendarEvent[] = [
    {
      title: 'An all day event',
      color: {primary: '#fff333', secondary: '#000'},
      start: new Date(),
      allDay: true,
    },
    {
      title: 'A non all day event',
      color: {primary: '#0000ff', secondary: '#fff'},
      start: new Date(),
      draggable: true,
      resizable: {beforeStart: true, afterEnd: true},
    },
  ];
  handleEvent(...args: any[]) {
    console.log(...args);
  }
}