Runtime Error Cannot read property 'dayHeaders' of undefined

[fgscaglioni]

Hello @twinssbc I'm getting this error on execute ionic serve. Have you any suggestion about what it can be?

Runtime Error

Cannot read property 'dayHeaders' of undefined

Stack

TypeError: Cannot read property 'dayHeaders' of undefined
at Object.eval [as updateDirectives] (ng:///NgCalendarModule/MonthViewComponent.ngfactory.js:80:38)
at Object.updateDirectives (http://localhost:8100/build/vendor.js:14338:29)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:13861:14)
at callViewAction (http://localhost:8100/build/vendor.js:14211:21)
at execEmbeddedViewsAction (http://localhost:8100/build/vendor.js:14169:17)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:13862:5)
at callViewAction (http://localhost:8100/build/vendor.js:14211:21)
at execComponentViewsAction (http://localhost:8100/build/vendor.js:14143:13)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:13867:5)
at callViewAction (http://localhost:8100/build/vendor.js:14211:21)

My environment

cli packages: (/home/fgscaglioni/.nvm/versions/node/v8.9.1/lib/node_modules)

@ionic/cli-utils  : 1.18.0
ionic (Ionic CLI) : 3.18.0

global packages:

cordova (Cordova CLI) : not installed

local packages:

@ionic/app-scripts : 3.1.2
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v8.9.1
npm               : 5.5.1 
OS                : Linux 4.4

[twinssbc]

@fgscaglioni This is because Ionic 3.9.2 depends on Angular 5.0. And starting from Angular 5.0, you need to explicitly register the locale you use. For example,

import { registerLocaleData } from '@angular/common';
import localeZh from '@angular/common/locales/zh';
registerLocaleData(localeZh);

You could get more information from the Localization section in README.

[fgscaglioni]

@twinssbc Thanks a lot!! This solves my problem!!

[faizan1219]

@twinssbc what should i import for spanish and english?

[twinssbc]

@faizan1219
Below are all the locales Angular supports. https://github.com/angular/angular/tree/master/packages/common/locales According to the Angular i18n guide, https://angular.io/guide/i18n Usually the file name is like - So for spanish, it will start with "es", you need to choose the country code. For example, from below url, you can see all es locales. https://www.science.co.il/language/Locale-codes.php Spanish - Argentina | es | es-ar | 11274 |   | 1252 Spanish - Bolivia | es | es-bo | 16394 |   | 1252 Spanish - Chile | es | es-cl | 13322 |   | 1252 Spanish - Colombia | es | es-co | 9226 |   | 1252 Spanish - Costa Rica | es | es-cr | 5130 |   | 1252 Spanish - Dominican Republic | es | es-do | 7178 |   | 1252 Spanish - Ecuador | es | es-ec | 12298 |   | 1252 Spanish - El Salvador | es | es-sv | 17418 |   | 1252 Spanish - Guatemala | es | es-gt | 4106 |   | 1252 Spanish - Honduras | es | es-hn | 18442 |   | 1252 Spanish - Mexico | es | es-mx | 2058 |   | 1252 Spanish - Nicaragua | es | es-ni | 19466 |   | 1252 Spanish - Panama | es | es-pa | 6154 |   | 1252 Spanish - Paraguay | es | es-py | 15370 |   | 1252 Spanish - Peru | es | es-pe | 10250 |   | 1252 Spanish - Puerto Rico | es | es-pr | 20490 |   | 1252 Spanish - Spain (Traditional) | es | es-es | 1034 |   | 1252 Spanish - Uruguay | es | es-uy | 14346 |   | 1252 Spanish - Venezuela | es | es-ve | 8202 |   | 1252

For English, it's the same case. By default, if you don't specify any locale, it will use en-US. You could choose other English locale.

[faizan1219]

import localeEs from '@angular/common/locales/es';
registerLocaleData(localeEs);

import localeEn from '@angular/common/locales/en';
registerLocaleData(localeEn);

I added this to my app.module, but i am still getting the same error of:

Cannot read property 'dayHeaders' of undefined

Just to clear things, I made a separate project, everything works perfect.. but when i integrate this in a project of mine it give all theses errors... the dependencies of that project is below, please take a look and tell me if there is something that might be conflicting with it,

  "dependencies": {
    "@angular/common": "5.0.1",
    "@angular/compiler": "5.0.1",
    "@angular/compiler-cli": "5.0.1",
    "@angular/core": "5.0.1",
    "@angular/forms": "5.0.1",
    "@angular/http": "5.0.1",
    "@angular/platform-browser": "5.0.1",
    "@angular/platform-browser-dynamic": "5.0.1",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/deeplinks": "^4.4.2",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "@ng-idle/core": "^2.0.0-beta.12",
    "@ng-idle/keepalive": "^2.0.0-beta.12",
    "@ngx-translate/core": "^9.0.1",
    "@ngx-translate/http-loader": "^2.0.0",
    "chart.js": "^2.7.1",
    "cordova-android": "6.3.0",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-whitelist": "^1.3.1",
    "cordova-sqlite-storage": "^2.1.3",
    "intl": "^1.2.5",
    "ionic-angular": "3.9.2",
    "ionic-plugin-deeplinks": "^1.0.15",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionic2-calendar": "^0.4.2",
    "ionicons": "3.0.0",
    "moment": "^2.20.1",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "typeorm": "^0.1.6",
    "zone.js": "0.8.18"
  },

[twinssbc]

@faizan1219 So you register the locale of es and en. I wonder which locale do you set for your app?

Do you have some setting like below in your app.module.ts?

    {provide: LOCALE_ID, useValue: 'es'}

[faizan1219]

this is my app.module file:

/** Angular Modules */
import { HttpModule } from '@angular/http';
import { ErrorHandler, NgModule, LOCALE_ID } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule, HttpClient } from "@angular/common/http";

/** Ionic Native Plugins */
import { Deeplinks } from "@ionic-native/deeplinks";
import { StatusBar } from "@ionic-native/status-bar";
import { SplashScreen } from "@ionic-native/splash-screen";

import { IonicApp, IonicErrorHandler, IonicModule } from "ionic-angular";

/** Third Party tools */
import { NgCalendarModule  } from 'ionic2-calendar';
import { NgIdleKeepaliveModule } from '@ng-idle/keepalive';
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";

/** Pages */
import { MyApp } from "./app.component";
import { AddCalendarEventPage } from '../pages/add-calendar-event/add-calendar-event';

import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';
import localeEn from '@angular/common/locales/en';
registerLocaleData(localeEn);
registerLocaleData(localeEs);

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

@NgModule({
  declarations: [
    MyApp,
    AddCalendarEventPage
  ],
  imports: [
    HttpModule,
    BrowserModule,
    HttpClientModule,
    NgCalendarModule,
    NgIdleKeepaliveModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    }),
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AddCalendarEventPage
  ],
  providers: [
    StatusBar,
    Deeplinks,
    SplashScreen,
    { provide: LOCALE_ID, useValue: 'en' },
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule {}

@twinssbc problem is my project targets both these language so i am using @ngx-translate/core for translation purpose and the user can change the language during the runtime... if you can suggest me something for dynamically doing that,, that will be very helpful for me..

[llamaonsecurity]

@faizan1219 Check your your locale settings of the calendar object that you are using inside the view. In my cause it was the main reason why i was still getting 'cannot read' error even after i have imported registerLocaleData.

Make sure that you are using 'en' locale during the calendar initialization.

[faizan1219]

@TheKalin do you mean something like this, <calendar [locale] = 'en-US' ....>?

well i have tried this too.

[llamaonsecurity]

@faizan1219 Try to set it via model in your ts script. I just tried to set it manually from HTML and it still causing the issue. Something like this: home.ts: calendar={ mode: 'month', locale: 'pl', autoSelect: 'false',

home.html <calendar [monthviewEventDetailTemplate]="customEventDetailsTemplate" [locale]="calendar.locale" ...

And mae sure that it is the same country code that you have imported via '@angular/common/locales/pl';

[mauricewipf]

I still get the Runtime error 'dayHeaders' undefined.

TypeError: Cannot read property 'dayHeaders' of undefined
    at Object.eval [as updateDirectives] (ng:///NgCalendarModule/MonthViewComponent.ngfactory.js:80:38)
    at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:8100/build/vendor.js:14692:21)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:13861:14)
    ...

I did these steps:

Replaced ngoutletcontextwith ngtemplateoutletcontext

main.ts

import { CalendarComponent } from 'ionic2-calendar/calendar';
import { MonthViewComponent } from 'ionic2-calendar/monthview';
import { WeekViewComponent } from 'ionic2-calendar/weekview';
import { DayViewComponent } from 'ionic2-calendar/dayview';

home.html

<calendar [locale]="calendar.locale"></calendar>

home.ts

export class HomePage {

  calendar = {
    locale: 'en-US'
  };

 ...
}

app.module.ts

import { NgModule, ErrorHandler, LOCALE_ID } from '@angular/core';
import { NgCalendarModule } from 'ionic2-calendar';
import { registerLocaleData } from '@angular/common';
import localeEn from '@angular/common/locales/en';
registerLocaleData(localeEn);
...
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    NgCalendarModule,
  ],
  ...
  providers: [
    ...
    { provide: LOCALE_ID, useValue: 'en-US' }
  ]
})

[llamaonsecurity]

@mauricewipf add this to your app.module.ts import { registerLocaleData } from '@angular/common'; import localeEN from '@angular/common/locale/en-usl'; registerLocaleData(localeEN)

[mauricewipf]

@TheKalin Sorry, I forgot that in my comment. I already have this in my app.module.ts. I edited my comment.

package.json

{
  ...
  "dependencies": {
    "@angular/common": "^5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "^5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "ionic": "3.19.0",
    "@ionic/storage": "2.1.3",
    "intl": "^1.2.5",
    "ionic-angular": "3.9.2",
    "ionic2-calendar": "^0.4.0",
    "ionicons": "3.0.0",
    "moment": "^2.20.1",
    ...
  },
  ...
}

[twinssbc]

@mauricewipf Are you still experiencing this issue? If you are using 0.4.x version, you don't need to deal with the ngTemplateOutletContext. Maybe you could try it in a clean project?

[mauricewipf]

I haven't tried it again so far. I was able to run successfully this calendar: ionic3-calendar.

[ktulufrozen]

@twinssbc I'm experiencing the same as @mauricewipf. I did the exact same steps as he did as still get the Cannot read property 'dayHeaders' of undefined runtime error.

[ktulufrozen]

@mauricewipf What fixed it is to add a valid date to [currentDate]. So what I did was

<calendar [currentDate]="calendar.currentDate"
            (onCurrentDateChanged)="onCurrentDateChanged($event)"
            (onRangeChanged)="reloadSource(startTime, endTime)"
            (onEventSelected)="onEventSelected($event)"
            (onTitleChanged)="onViewTitleChanged($event)"
            (onTimeSelected)="onTimeSelected($event)"
            step="30">
  </calendar>

and in the component:

public calendar = {
    mode: 'month',
    currentDate: new Date()
  };