Argument of type { static: boolean; } is not assignable to parameter of type { read?: any }

Question

In my newly created Angular app, I'm trying to use the angular-calendar by mattlewis92 to create his calendar. I've taken copied all of the steps and code listed on his github: https://mattlewis92.github.io/angular-calendar/#/kitchen-sink but I keep getting an error on the first line, which is @ViewChild('modalContent', { static: true }) modalContent: TemplateRef<any>; that says "argument of type { static: boolean; } is not assignable to parameter of type { read?: any }". Here's the rest of the code for reference, but I don't think it matters:

import { Component, ChangeDetectionStrategy, ViewChild, TemplateRef} from '@angular/core';
import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns';
import { Subject } from 'rxjs';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent, CalendarView } from 'angular-calendar';

import * as _moment from 'moment';
import { JQ_TOKEN } from '../common/jQuery.service';
const moment = _moment;

const colors: any = {
  red: {
    primary: '#ad2121',
    secondary: '#FAE3E3'
  },
  blue: {
    primary: '#1e90ff',
    secondary: '#D1E8FF'
  },
  yellow: {
    primary: '#e3bc08',
    secondary: '#FDF1BA'
  }
};

@Component({
  selector: 'vacation',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './vacation.component.html',
  styleUrls: ['./vacation.component.css']
})

export class VacationComponent {
  @ViewChild('modalContent', { static: true }) modalContent: TemplateRef<any>;

  view: CalendarView = CalendarView.Month;

  CalendarView = CalendarView;

  viewDate: Date = new Date();

  modalData: {
    action: string;
    event: CalendarEvent;
  };

  actions: CalendarEventAction[] = [
    {
      label: '<i class="fa fa-fw fa-pencil"></i>',
      onClick: ({ event }: { event: CalendarEvent }): void => {
        this.handleEvent('Edited', event);
      }
    },
    {
      label: '<i class="fa fa-fw fa-times"></i>',
      onClick: ({ event }: { event: CalendarEvent }): void => {
        this.events = this.events.filter(iEvent => iEvent !== event);
        this.handleEvent('Deleted', event);
      }
    }
  ];

  refresh: Subject<any> = new Subject();

  events: CalendarEvent[] = [
    {
      start: subDays(startOfDay(new Date()), 1),
      end: addDays(new Date(), 1),
      title: 'A 3 day event',
      color: colors.red,
      actions: this.actions,
      allDay: true,
      resizable: {
        beforeStart: true,
        afterEnd: true
      },
      draggable: true
    },
    {
      start: startOfDay(new Date()),
      title: 'An event with no end date',
      color: colors.yellow,
      actions: this.actions
    },
    {
      start: subDays(endOfMonth(new Date()), 3),
      end: addDays(endOfMonth(new Date()), 3),
      title: 'A long event that spans 2 months',
      color: colors.blue,
      allDay: true
    },
    {
      start: addHours(startOfDay(new Date()), 2),
      end: new Date(),
      title: 'A draggable and resizable event',
      color: colors.yellow,
      actions: this.actions,
      resizable: {
        beforeStart: true,
        afterEnd: true
      },
      draggable: true
    }
  ];

  activeDayIsOpen: boolean = true;

  constructor(private modal: NgbModal) { }

  dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
    if (isSameMonth(date, this.viewDate)) {
      this.viewDate = date;
      if (
        (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
        events.length === 0
      ) {
        this.activeDayIsOpen = false;
      } else {
        this.activeDayIsOpen = true;
      }
    }
  }

  eventTimesChanged({
    event,
    newStart,
    newEnd
  }: CalendarEventTimesChangedEvent): void {
    this.events = this.events.map(iEvent => {
      if (iEvent === event) {
        return {
          ...event,
          start: newStart,
          end: newEnd
        };
      }
      return iEvent;
    });
    this.handleEvent('Dropped or resized', event);
  }

  handleEvent(action: string, event: CalendarEvent): void {
    this.modalData = { event, action };
    this.modal.open(this.modalContent, { size: 'lg' });
  }

  addEvent(): void {
    this.events = [
      ...this.events,
      {
        title: 'New event',
        start: startOfDay(new Date()),
        end: endOfDay(new Date()),
        color: colors.red,
        draggable: true,
        resizable: {
          beforeStart: true,
          afterEnd: true
        }
      }
    ];
  }

  deleteEvent(eventToDelete: CalendarEvent) {
    this.events = this.events.filter(event => event !== eventToDelete);
  }

  setView(view: CalendarView) {
    this.view = view;
  }

  closeOpenMonthViewDay() {
    this.activeDayIsOpen = false;
  }
}

Any help would be greatly appreciated on why this is happening or how I would go about fixing it?

Declinatory

This depends on what version of angular you are using, if you are using angular 8 then this code is fine, otherwise remove { static: true } – Coequal

@Coequal oh! okay, thanks! it said it was for 6+ so I just figured it was all standard, that fixed it! – Declinatory

Answer 1

Once you upgraded to newer version of Angular. Remove node_module folder and run npm install

Buddy

Ensure you delete the appropriate node_modules folder (you may have multiple levels of node_modules, you must delete your Angular apps' node_modules (i.e. the one sitting next to your angular.json file) Consider whether your package-lock.json has worked for other developers. It will be updated on re-running npm install Some upgrades of Angular require an upgrade to your node.js (otherwise I got reserved word error in executor.processAll) – Amylopsin

It does not solve the problem. Please give me the correct solutions. – Oleary

Answer 2

If you are using Angular 7 and less { static: true } will be a problem for you.

Please check the angular version of that project in package.json file "@angular/core": "~9.0.6"

• If the version is above 7 then this will be fine, just give npm install in the console of that project which will update the project and resolve the project

• If the version is less or equal to 7, you have to remove the { static: true } from the line where it is making a problem

I hope this will solve your problem

Bundle

worked for me ... just need to remove that as you said ... resolved.... thanks.... my error is ERROR in src/app/orders/orders.component.ts(62,30): error TS2345: Argument of type '{ static: boolean; }' is not assignable to parameter of type '{ read?: any; }'. Object literal may only specify known properties, and 'static' does not exist in type '{ read?: any; }'. – Ramp

Answer 3

On Angular 8 added a new boolean property for @ViewChild called 'static'. 'static' defines the timing of initialization. here it Expected 2 arguments, but got 1. If 'static' is true, initialization will occur on view initialization (ngOnInit). If 'static' is false, initialization will occur after the view is rendered (ngAfterViewInit).

This only applies to @ViewChild, not @ViewChildren, so try this:

@ViewChild(MatList, { static: false, read: ElementRef }) matList: ElementRef;

//Getting a reference to the items/messages within the list
@ViewChildren(MatListItem, { read: ElementRef }) matListItems: QueryList;

FYI Never try this -->Once you upgraded to a newer version of Angular. Never ever Remove the node_module folder and run npm install this will cause unnecessary damage to the existing node modules structure and may create some issues which happened in my case it resulted in dragula.min.css and ng-context menu folder getting deleted on npm install after deleting.

Depalma