Angular-calendar: Template parse errors

[L0key]

Unable to make use of the demo in Angular2 RC5 due to exceptions such as the following:
Can't bind to 'viewDate' since it isn't a known property of 'mwl-calendar-month-view'.

1. If 'mwl-calendar-month-view' is an Angular component and it has 'viewDate' input, then verify that it is part of this module.
2. If 'mwl-calendar-month-view' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
   ("
   *ngSwitchCase="'month'"
   [ERROR ->][viewDate]="viewDate"
   [events]="events"
   [activeDayIsOpen]="activeDayIsOpen"
   "): Calendar@31:10

I can't see anything wrong with the CalendarMonthView component, so I'm at a loss as to what the issue is.

[mattlewis92]

Are you importing the CalendarModule into your apps NgModule?

On 26 Sep 2016, at 23:22, Scott Hertel [email protected] wrote:

Unable to make use of the demo in Angular2 RC5 due to exceptions such as the following:
Can't bind to 'viewDate' since it isn't a known property of 'mwl-calendar-month-view'.

If 'mwl-calendar-month-view' is an Angular component and it has 'viewDate' input, then verify that it is part of this module.
If 'mwl-calendar-month-view' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (" ][viewDate]="viewDate" [events]="events" [activeDayIsOpen]="activeDayIsOpen" "): Calendar@31:10
I can't see anything wrong with the CalendarMonthView component, so I'm at a loss as to what the issue is.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[L0key]

Followed the imports and providers for NgModule on the demo app and this appears to have cleared the error.

[Stevan0102]

for anyone who found the same problem, you need to include the demo-utlis folder and its files as well. Thats how i fix my problem

[Abiansh]

even though I add CalendarModule in NgModule it is not working for me .... where do i get demo-utlis folder @Stevan0102

Here it is my app.module.ts file

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HelloIonicPage } from '../pages/hello-ionic/hello-ionic';
import { ItemDetailsPage } from '../pages/item-details/item-details';
import { ListPage } from '../pages/list/list';
import { CalendarModule } from 'angular-calendar';

@NgModule({
declarations: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage
],
imports: [
IonicModule.forRoot(MyApp),

CalendarModule.forRoot()

],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HelloIonicPage,
ItemDetailsPage,
ListPage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

[Stevan0102]

Hey @Abiansh ,
demo-utlis is here: https://github.com/mattlewis92/angular-calendar/tree/master/demos/demo-modules/demo-utils

if you look at this demo: https://mattlewis92.github.io/angular-calendar/demos/#/kitchen-sink

in module.ts, there is this line:

import { DemoUtilsModule } from '../demo-utils/module';

and this:

imports: [
DemoUtilsModule
],

i inculded these, thats how it went working for me

[Abiansh]

Thanks @Stevan0102 . 👍 .... I got the another solution to accomplish the goal....

[Enitnelav]

Hi, i have the same error and i don't want to use demoUtils i think it can work without, have you an other solution ?
thanks

[mattlewis92]

@Enitnelav remove any component usages from your templates that start with <mwl-demo-utils-* and it should work ok.

[Enitnelav]

i am using <mwl-calendar-month-view></mwl-calendar-month-view>

[mattlewis92]

Are you including CalendarModule.forRoot() in your NgModule import?

[Enitnelav]

For sure

/** angular modules */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpModule, Http } from '@angular/http';
import { RouterModule } from '@angular/router';
/** lib modules */
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule , TranslateLoader} from '@ngx-translate/core';
import { CookieModule } from 'ngx-cookie';
import { CalendarModule } from 'angular-calendar';
/** Renault modules */
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { LayoutModule } from './layout/layout.module';
import { GalleryModule } from './pages/gallery/gallery.module';
import { CountryModule } from './pages/country/country.module';
import { VehicleModule } from './pages/vehicle/vehicle.module';
import { WelcomeModule } from './pages/welcome/welcome.module';
import { LiveModule } from './pages/live/live.module';
/** app services */
import { YamlLoader } from './core/services/translate/yaml-loader.service';
import { HttpLoaderFactory } from './core/services/translate/http-loader-factory.service';
/** app components */
import { AppComponent } from './app.component';
/** style guide */
import { StyleGuideModule } from './pages/style-guide/style-guide.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // angular 4.0+ only
    CalendarModule.forRoot(),
    FormsModule,
    HttpModule,
    TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useClass: YamlLoader,
          useFactory: HttpLoaderFactory
        }
    }),
    NgbModule.forRoot(),
    CookieModule.forRoot(),
    CoreModule,
    SharedModule,
    LayoutModule,
    GalleryModule,
    CountryModule,
    VehicleModule,
    WelcomeModule,
    StyleGuideModule,
    LiveModule,
    RouterModule.forRoot([]),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

[mattlewis92]

I can't see anything wrong with that, what's the exact error you're getting?

[Enitnelav]

Unhandled Promise rejection: Template parse errors:
'mwl-calendar-month-view' is not a known element:
1. If 'mwl-calendar-month-view' is an Angular component, then verify that it is part of this module.
2. If 'mwl-calendar-month-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<section class="calendar">
  [ERROR ->]<mwl-calendar-month-view></mwl-calendar-month-view>
</section>
"): ng:///LiveModule/LiveCalendarComponent.html@1:2 ; Zone: <root> ; Task: Promise.then ; Value: Error {__zone_symbol__error: Error: Template parse errors:
'mwl-calendar-month-view' is not a known element:
1. If 'mwl-calendar-……}

My calendar is a child of a component of one page of the application

[mattlewis92]

Ah right, that'll be why then. Add CalendarModule (without the forRoot bit) to your child components NgModule.

[Enitnelav]

Cool thanks :)

[menomanabdulla]

`'mwl-demo-utils-date-time-picker' is not a known element:

1. If 'mwl-demo-utils-date-time-picker' is an Angular component, then verify that it is part of this module.
2. If 'mwl-demo-utils-date-time-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   
   
   [ERROR ->] [(ngModel)]="event.start"
   (ngModelChange)="refre"): ng:///DashboardModule/EventCalendarComponent.html@152:8
   'mwl-demo-utils-date-time-picker' is not a known element:
3. If 'mwl-demo-utils-date-time-picker' is an Angular component, then verify that it is part of this module.
4. If 'mwl-demo-utils-date-time-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("`

i steel get this error,i use my-calendar as child component and use CalendarModule (without the forRoot) in child components NgModule.

[mattlewis92]

mwl-demo-utils-date-time-picker is just a utility used for part of the demo, it's not part of this library.

[ofir94]

Hello, I'm having problems with demo-utils, I'm new in angular and I want to use this calendar, where should I copy the demo-utils directory? because It is showing me the error:
Cannot find module "../demo-utils/module"
Thanks

[cyrinegh]

hello, please where we can add demo-utils ?

[cyrinegh]

this is the error please help

[Rajan5496]

i have same prob with mwl-utils-date-time-picker

Uncaught Error: Template parse errors:
'mwl-demo-utils-date-time-picker' is not a known element:

1. If 'mwl-demo-utils-date-time-picker' is an Angular component, then verify that it is part of this module.
2. If 'mwl-demo-utils-date-time-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   
   
   [ERROR ->] [(ngModel)]="event.start"
   (ngModelChange)="refre"): ng:///AppModule/CalenderComponent.html@163:8
   'mwl-demo-utils-date-time-picker' is not a known element:
3. If 'mwl-demo-utils-date-time-picker' is an Angular component, then verify that it is part of this module.
4. If 'mwl-demo-utils-date-time-picker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   
   
   [ERROR ->] [(ngModel)]="event.end"
   (ngModelChange)="refresh"): ng:///AppModule/CalenderComponent.html@170:8
   at syntaxError (compiler.es5.js:1694)
   at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12791)
   at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:26994)
   at compiler.es5.js:26913
   at Set.forEach ()
   at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:26913)
   at compiler.es5.js:26800
   at Object.then (compiler.es5.js:1683)
   at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26799)
   at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26728)

[canangok]

I could not fix the error in any way. Can you please help?

error ;
'mwl-calendar-month-view' is not a known element:

1. If 'mwl-calendar-month-view' is an Angular component, then verify that it is part of this module.
2. If 'mwl-calendar-month-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.Angular

App.module.ts ;

@NgModule({
imports: [
.....
CommonModule,
FormsModule,
NgbModalModule,
FlatpickrModule.forRoot(),
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory
}),
DemoUtilsModule
],
declarations: [
....
],
schemas :[CUSTOM_ELEMENTS_SCHEMA],

})

[mattlewis92]

@canangok it looks like you're trying to use the component in a different module. So you need to import the calendar module in the same NgModule that has the component you're trying to use it in, rather than the root app module which I think you're doing,

[canangok]

thank you. it was dissolved.
I'il ask you something else. I try for a long time. I can't get the start day and end of the day from This.events. I want to save this.events to the Firebase. Startday and endday values ​​are not going to database. Can you help me?