angular2 'is not a known element'

Question

Hi~ I'm beginer of Angular2.

When I use "ANGULAR 2 UI FRAMEWORK" as http://www.angulartypescript.com/angular-2-ui-framework/

also I use datepicker in my reactive form. and I had error below.

Unhandled Promise rejection: Template parse errors:
Can't bind to 'minDate' since it isn't a known property of 'datepicker'. ("nline-block; min-height:290px;">
          {{minDate}}_{{showWeeks}}
            <datepicker [(ngModel)]="dt" [ERROR ->][minDate]="minDate" [showWeeks]="true"></datepicker>
          </div>
          <hr />
"): WatchfaceDetailComponent@44:35
Can't bind to 'showWeeks' since it isn't a known property of 'datepicker'. ("ght:290px;">
          {{minDate}}_{{showWeeks}}
            <datepicker [(ngModel)]="dt" [minDate]="minDate" [ERROR ->][showWeeks]="true"></datepicker>
          </div>
          <hr />
"): WatchfaceDetailComponent@44:55
'datepicker' is not a known element:
1. If 'datepicker' is an Angular component, then verify that it is part of this module.
2. If 'datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
          <div style="display:inline-block; min-height:290px;">
          {{minDate}}_{{showWeeks}}
            [ERROR ->]<datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
          </div>
          <h"): WatchfaceDetailComponent@44:6 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'minDate' since it isn't a known property of 'datepicker'. ("nline-block; min-height:290px;">
          {{minDate}}_{{showWeeks}}
            <datepicker [(ngModel)]="dt" [ERROR ->][minDate]="minDate" [showWeeks]="true"></datepicker>
          </div>
          <hr />
"): WatchfaceDetailComponent@44:35
Can't bind to 'showWeeks' since it isn't a known property of 'datepicker'. ("ght:290px;">
          {{minDate}}_{{showWeeks}}
            <datepicker [(ngModel)]="dt" [minDate]="minDate" [ERROR ->][showWeeks]="true"></datepicker>
          </div>
          <hr />
"): WatchfaceDetailComponent@44:55
'datepicker' is not a known element:
1. If 'datepicker' is an Angular component, then verify that it is part of this module.
2. If 'datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
          <div style="display:inline-block; min-height:290px;">
          {{minDate}}_{{showWeeks}}
            [ERROR ->]<datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
          </div>
          <h"): WatchfaceDetailComponent@44:6
    at TemplateParser.parse (http://localhost:4200/main.bundle.js:17621:19)
    at RuntimeCompiler._compileTemplate (http://localhost:4200/main.bundle.js:42428:51)
    at http://localhost:4200/main.bundle.js:42351:83
    at Set.forEach (native)
    at compile (http://localhost:4200/main.bundle.js:42351:47)
    at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:88685:26)
    at Zone.run (http://localhost:4200/main.bundle.js:88567:43)
    at http://localhost:4200/main.bundle.js:88955:57
    at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:88718:35)
    at Zone.runTask (http://localhost:4200/main.bundle.js:88607:47) Error: Template parse errors:
Can't bind to 'minDate' since it isn't a known property of 'datepicker'. ("nline-block; min-height:290px;">
          {{minDate}}_{{showWeeks}}
            <datepicker [(ngModel)]="dt" [ERROR ->][minDate]="minDate" [showWeeks]="true"></datepicker>
          </div>
          <hr />
"): WatchfaceDetailComponent@44:35
Can't bind to 'showWeeks' since it isn't a known property of 'datepicker'. ("ght:290px;">
          {{minDate}}_{{showWeeks}}
            <datepicker [(ngModel)]="dt" [minDate]="minDate" [ERROR ->][showWeeks]="true"></datepicker>
          </div>
          <hr />
"): WatchfaceDetailComponent@44:55
'datepicker' is not a known element:

and I will show you my code below. app.module

//import {MODAL_DIRECTIVES,TOOLTIP_DIRECTIVES,TYPEAHEAD_DIRECTIVES,CollapseDirective,PaginationComponent } from "ng2-bootstrap/ng2-bootstrap";
import { AppComponent } from './app.component';
import {routing, appRoutingProviders} from './app.routing';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { WatchfaceModule } from './watchface/watchface.module';
import { MenuModule } from './menu/menu.module';
import { ConfigModule } from './config/config.module';
import { PagerService } from './_services/index';
//import { DatePicker } from './component/datepicker.component';

/**
 * Demo  Component Bootstrap- Start
 */

//import { AccordionDemoComponent } from './com-impl/accordion/accordion-demo.component';
//import { AlertDemoComponent } from './com-impl/alert/alert-demo.component';
//import { ButtonDemoComponent } from './com-impl/buttons/button-demo.component';
//import { CarouselDemoComponent } from './com-impl/carousel/carousel-demo.component';
//import { CollapseDemoComponent } from './com-impl/collapse/collapse-demo.component';
//import { DropdownDemoComponent } from './com-impl/dropdown/dropdown-demo.component';
//import { ModalDemoComponent } from './com-impl/modal/modal-demo.component';
//import { ProgressbarDemoComponent } from './com-impl/progressbar/progressbar-demo.component';
//import { RatingDemoComponent } from './com-impl/rating/rating-demo.component';
//import { TabsDemoComponent } from './com-impl/tabs/tabs-demo.component';
//import { TooltipDemoComponent } from './com-impl/tooltip/tooltip-demo.component';
//import { TypeaheadDemoComponent } from './com-impl/typeahead/typeahead-demo.component';
//import { PaginationDemoComponent } from './com-impl/pagination/pagination-demo.component';
import { DatepickerDemoComponent } from './com-impl/datepicker/datepicker-demo.component';
//import { TimepickerDemoComponent } from './com-impl/timepicker/timepicker-demo.component';

 /**
 * Demo  Component Bootstrap- End
 */

/**
 * Bootstrap Modules - Start
 */
import { AlertModule } from './com/alert/alert.module';
import { AccordionModule } from './com/accordion/accordion.module';
import { ButtonsModule } from './com/buttons/buttons.module';
import { CarouselModule } from './com/carousel/carousel.module';
import { DropdownModule } from './com/dropdown/dropdown.module';
import { ModalModule } from './com/modal/modal.module';
import { ProgressbarModule } from './com/progressbar/progressbar.module';
import { RatingModule } from './com/rating/rating.module';
import { TabsModule } from './com/tabs/tabs.module';
import { TooltipModule } from './com/tooltip/tooltip.module';
import { TypeaheadModule } from './com/typeahead/typeahead.module';
import { CollapseModule } from './com/collapse/collapse.module';
import { PaginationModule } from './com/pagination/pagination.module';
import { DatepickerModule } from './com/datepicker/datepicker.module';
import { TimepickerModule } from './com/timepicker/timepicker.module';

/**
 * Bootstrap Modules - End
 */

/**
 * Other Modules - Start
 */
import { NgGridModule } from './com/grid/modules/NgGrid.module'; // grid system
//import { AgmCoreModule } from './com/googlemaps/core'; // google maps
import { UPLOAD_DIRECTIVES } from './com/fileupload/ng2-uploader';
/**
 * Other Modules - End
 */

/**
 * Demo Other Modules  Components - Start
 */

import { GridDemoComponent } from './com-impl/grid/grid-demo.component'; // grid system demo
//import { GoogleMapsDemoComponent } from './com-impl/googlemaps/googlemaps-demo.component'; // google maps demo
import { FileUploadDemoComponent } from './com-impl/fileupload/fileupload-demo.component'; // google maps demo
/**
 * Demo Other Modules  Components - End
 */


@NgModule({
  declarations: [
    AppComponent,
//    AccordionDemoComponent,
//    AlertDemoComponent,
//    ButtonDemoComponent,
//    CarouselDemoComponent,
//    CollapseDemoComponent,
//    DropdownDemoComponent,
//    ModalDemoComponent,
//    ProgressbarDemoComponent,
//    RatingDemoComponent,
//    TabsDemoComponent,
//    TooltipDemoComponent,
//    TypeaheadDemoComponent,
    DatepickerDemoComponent,
//    TimepickerDemoComponent,
//    PaginationDemoComponent,
//    GridDemoComponent,
    //GoogleMapsDemoComponent,
    //datepicker,
    UPLOAD_DIRECTIVES,
    FileUploadDemoComponent
  ],
  imports: [
    DatepickerModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    MenuModule,
    ConfigModule,
    WatchfaceModule,
    //BrowserModule,
    //FormsModule, 
    ReactiveFormsModule,       
    //HttpModule,
    AlertModule,
    AccordionModule,
    ButtonsModule,
    CarouselModule,
    CollapseModule,
    DropdownModule,
    ModalModule,
    ProgressbarModule,
    RatingModule,
    TabsModule,
    TooltipModule,
    TypeaheadModule,
    TimepickerModule,
    PaginationModule,
    NgGridModule,//grid
//    AgmCoreModule.forRoot({
//      apiKey: 'Your - > Google-MAPS-API-KEY - here' //google maps api key
//    }),
  ],
  providers: [
    appRoutingProviders,
    PagerService
  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

watchface-deatail.component

import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';
import { Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Watchface } from './watchface';
import { WatchfaceService} from './watchface.service';
import * as moment from 'moment';

let template = require('./watchface-detail.component.html');
@Component({
    //moduleId: module.id,
    selector: 'watchface-form',
    template: template,
    providers: [WatchfaceService]
})

export class WatchfaceDetailComponent implements OnInit {
    //################################
    // datepicker
    //################################
    public dt: Date = new Date();
    public minDate: Date = void 0;
    public events: Array<any>;
    public tomorrow: Date;
    public afterTomorrow: Date;
    public formats: Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];
    public format: string = this.formats[0];
    public dateOptions: any = {
        formatYear: 'YY',
        startingDay: 1
    };
    private opened: boolean = false;

    //################################
    // paging, form validation
    //################################
    private allItems: any[];
    form: FormGroup;
    watchface: Watchface;

    itemNo: number;
    errorMessage: string;

    formErrors = {
        artist: '',
        artistId: '',
        description: '',
        featuredBanner: '',
        fileUpdatedAt: '',
        functions: '',
        image1: '',
        image2: '',
        image3: '',
        image4: '',
        image5: '',
        likes: '',
        username: '',
        addresses: [
            { city: '', country: '' }
        ]
    };

    validationMessages = {
        artist: {
            required: 'artist is required.',
            minlength: 'artist must be 1 characters.',
            maxlength: 'artist can\'t be longer than 255 characters.'
        },
        artistId: {
            required: 'artist_id is required.',
            minlength: 'artist_id must be 1 characters.',
            maxlength: 'artist_id can\'t be longer than 255 characters.'
        },
        description: {
            required: 'description is required.',
            minlength: 'description must be 1 characters.',
            maxlength: 'description can\'t be longer than 255 characters.'
        },
        featuredBanner: {
            required: 'featuredBanner is required.',
            minlength: 'featuredBanner must be 1 characters.',
            maxlength: 'featuredBanner can\'t be longer than 255 characters.'
        },
        fileUpdatedAt: {
            required: 'fileUpdatedAt is required.',
            minlength: 'fileUpdatedAt must be 1 characters.',
            maxlength: 'fileUpdatedAt can\'t be longer than 255 characters.'
        },
        functions: {
            required: 'functions is required.',
            minlength: 'functions must be 1 characters.',
            maxlength: 'functions can\'t be longer than 255 characters.'
        },
        image1: {
            required: 'image1 is required.',
            minlength: 'image1 must be 1 characters.',
            maxlength: 'image1 can\'t be longer than 255 characters.'
        },
        image2: {
            required: 'image1 is required.',
            minlength: 'image1 must be 1 characters.',
            maxlength: 'image1 can\'t be longer than 255 characters.'
        },
        image3: {
            required: 'image1 is required.',
            minlength: 'image1 must be 1 characters.',
            maxlength: 'image1 can\'t be longer than 255 characters.'
        },
        image4: {
            required: 'image1 is required.',
            minlength: 'image1 must be 1 characters.',
            maxlength: 'image1 can\'t be longer than 255 characters.'
        },
        image5: {
            required: 'image1 is required.',
            minlength: 'image1 must be 1 characters.',
            maxlength: 'image1 can\'t be longer than 255 characters.'
        },
        likes: {
            required: 'likes is required.',
            minlength: 'likes must be 1 characters.',
            maxlength: 'likes can\'t be longer than 255 characters.'
        },
        name: {
            required: 'Name is required.',
            minlength: 'Name must be 3 characters.',
            maxlength: 'Name can\'t be longer than 6 characters.'
        },
        username: {
            required: 'Username is required.',
            minlength: 'Username must be 3 characters.'
        },
        addresses: {
            city: {
                required: 'City is required.',
                minlength: 'City must be 3 characters.'
            },
            country: {
                required: 'Country is required.'
            }
        }
    };

    constructor(private watchfaceService: WatchfaceService, private route: ActivatedRoute, private fb: FormBuilder) {
        this.route.params.subscribe(
            params => {
                this.itemNo = params['no'];
            }
        );

        //################################
        // datepicker
        //################################
        (this.tomorrow = new Date()).setDate(this.tomorrow.getDate() + 1);
        (this.afterTomorrow = new Date()).setDate(this.tomorrow.getDate() + 2);
        (this.minDate = new Date()).setDate(this.minDate.getDate() - 1000);
        this.events = [
            { date: this.tomorrow, status: 'full' },
            { date: this.afterTomorrow, status: 'partially' }
        ];
    }

    ngOnInit() {
        this.getWatchface();
        // build the data model for our form
        this.buildForm();
    }

    getWatchface() {
        let params: URLSearchParams = new URLSearchParams();
        params.set('no', this.itemNo + "");
        this.watchfaceService.getWatchfaceList(params)
            .subscribe(
            allItems => {
                if (allItems != null && allItems.length > 0) {
                    this.watchface = allItems[0];
                    console.log(this.watchface);
                }
                //this.buildForm();
                //this.allItems = allItems;
            },
            error => this.errorMessage = <any>error);
    }

    /**
     * build the initial form
     */
    buildForm() {
        // build our form
        this.form = this.fb.group({
            no: ['', [Validators.minLength(1), Validators.maxLength(255)]],
            //no: ['', Validators.required, [Validators.minLength(1), Validators.maxLength(255)]],
            artist: ['', Validators.required, [Validators.minLength(1), Validators.maxLength(255)]],
            artistId: ['', [Validators.minLength(1), Validators.maxLength(255)]],
            description: ['', [Validators.minLength(1), Validators.maxLength(255)]],
            featuredBanner: ['', [Validators.minLength(1), Validators.maxLength(255)]],
            fileUpdatedAt: ['', [Validators.minLength(1), Validators.maxLength(255)]],
            functions: ['', [Validators.minLength(1), Validators.maxLength(255)]],
            image1: ['', [Validators.minLength(1), Validators.maxLength(255)]],
            image2: ['', [Validators.minLength(1), Validators.maxLength(255)]],
            image3: ['', [Validators.minLength(1), Validators.maxLength(255)]],
            image4: ['', [Validators.minLength(1), Validators.maxLength(255)]],
            image5: ['', [Validators.minLength(1), Validators.maxLength(255)]],
            likes: ['', [Validators.minLength(1), Validators.maxLength(255)]],
            name: ['', [Validators.minLength(3), Validators.maxLength(6)]],
            username: ['', Validators.minLength(3)],
            addresses: this.fb.array([
                this.createAddress()
            ])
        });

        // watch for changes and validate
        this.form.valueChanges.subscribe(data => {
            this.validateForm();
        }
        );
    }

    /**
     * validate the entire form
     */
    validateForm() {
        for (let field in this.formErrors) {
            // clear that input field errors
            this.formErrors[field] = '';

            // grab an input field by name
            let input = this.form.get(field);

            if (input.invalid && input.dirty) {
                // figure out the type of error
                // loop over the formErrors field names
                for (let error in input.errors) {
                    // assign that type of error message to a variable
                    this.formErrors[field] = this.validationMessages[field][error];
                }
            }
        }
    }



    //################################
    // datepicker
    //################################
    createAddress() {
        return this.fb.group({
            city: ['', Validators.minLength(3)],
            country: ['']
        });
    }

    addAddress() {
        let addresses = <FormArray>this.form.get('addresses');
        addresses.push(this.createAddress());
    }

    removeAddress(i) {
        let addresses = <FormArray>this.form.get('addresses');
        addresses.removeAt(i);
    }

    processForm() {
        console.log('processing', this.form.value);
    }

    public getDate(): number {
        return this.dt && this.dt.getTime() || new Date().getTime();
    }

    public today(): void {
        this.dt = new Date();
    }

    public d20090824(): void {
        this.dt = moment('2009-08-24', 'YYYY-MM-DD').toDate();
    }

    // todo: implement custom class cases
    public getDayClass(date: any, mode: string): string {
        if (mode === 'day') {
            let dayToCheck = new Date(date).setHours(0, 0, 0, 0);

            for (let i = 0; i < this.events.length; i++) {
                let currentDay = new Date(this.events[i].date).setHours(0, 0, 0, 0);

                if (dayToCheck === currentDay) {
                    return this.events[i].status;
                }
            }
        }

        return '';
    }

    public disabled(date: Date, mode: string): boolean {
        return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
    }

    public open(): void {
        this.opened = !this.opened;
    }

    public clear(): void {
        this.dt = void 0;
    }

    public toggleMin(): void {
        this.dt = new Date(this.minDate.valueOf());

        console.log(this.dt);
    }

}

watchface-detail.component.html

<form (ngSubmit)="processForm()" [formGroup]="form">
    <div class="form-group">
            <div>
              <pre class="card card-block card-header">Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
              <h4>Inline</h4>
              <div style="display:inline-block; min-height:290px;">
              {{minDate}}_{{showWeeks}}
                <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
              </div>
              <hr />
              <button type="button" class="btn btn-sm btn-info" (click)="today()">Today</button>
              <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="d20090824();">2009-08-24</button>
              <button type="button" class="btn btn-sm btn-danger" (click)="clear()">Clear</button>
              <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="toggleMin()" tooltip="After today restriction">Min date</button>
            </div>
    </div>


    <div class="form-group col-sm-12 text-center">
        <br/><br/>
        <button type="submit" class="btn btn-danger">Submit</button>
    </div>

</form>

---

also, add additiona base code of datepicker datepicker.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { DatePickerInnerComponent } from './datepicker-inner.component';
import { DatePickerComponent } from './datepicker.component';
import { DayPickerComponent } from './daypicker.component';
import { MonthPickerComponent } from './monthpicker.component';
import { YearPickerComponent } from './yearpicker.component';
import { ComponentsHelper } from '../utils/components-helper.service';

@NgModule({
  imports: [CommonModule, FormsModule],
  declarations: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent,
                 MonthPickerComponent, YearPickerComponent],
  exports: [DatePickerComponent, DatePickerInnerComponent, DayPickerComponent, FormsModule,
            MonthPickerComponent, YearPickerComponent],
  providers: [ComponentsHelper]
})
export class DatepickerModule {
}

datepicker.component.ts

import { Component, EventEmitter, Input, Output, Self, ViewChild } from '@angular/core';
import { DatePickerInnerComponent } from './datepicker-inner.component';
import { ControlValueAccessor, NgModel } from '@angular/forms';

/* tslint:disable:component-selector-name component-selector-type */
@Component({
  selector: 'datepicker[ngModel]',
  template: `
    <datepicker-inner [activeDate]="activeDate"
                      (update)="onUpdate($event)"
                      [datepickerMode]="datepickerMode"
                      [initDate]="initDate"
                      [minDate]="minDate"
                      [maxDate]="maxDate"
                      [minMode]="minMode"
                      [maxMode]="maxMode"
                      [showWeeks]="showWeeks"
                      [formatDay]="formatDay"
                      [formatMonth]="formatMonth"
                      [formatYear]="formatYear"
                      [formatDayHeader]="formatDayHeader"
                      [formatDayTitle]="formatDayTitle"
                      [formatMonthTitle]="formatMonthTitle"
                      [startingDay]="startingDay"
                      [yearRange]="yearRange"
                      [customClass]="customClass"
                      [dateDisabled]="dateDisabled"
                      [onlyCurrentMonth]="onlyCurrentMonth"
                      [shortcutPropagation]="shortcutPropagation"
                      (selectionDone)="onSelectionDone($event)">
      <daypicker tabindex="0"></daypicker>
      <monthpicker tabindex="0"></monthpicker>
      <yearpicker tabindex="0"></yearpicker>
    </datepicker-inner>
    `,
  providers: [NgModel]
})
/* tslint:enable:component-selector-name component-selector-type */
export class DatePickerComponent implements ControlValueAccessor {
  @Input() public datepickerMode:string;
  @Input() public initDate:Date;
  @Input() public minDate:Date;
  @Input() public maxDate:Date;
  @Input() public minMode:string;
  @Input() public maxMode:string;
  @Input() public showWeeks:boolean;
  @Input() public formatDay:string;
  @Input() public formatMonth:string;
  @Input() public formatYear:string;
  @Input() public formatDayHeader:string;
  @Input() public formatDayTitle:string;
  @Input() public formatMonthTitle:string;
  @Input() public startingDay:number;
  @Input() public yearRange:number;
  @Input() public onlyCurrentMonth:boolean;
  @Input() public shortcutPropagation:boolean;
  @Input() public customClass:Array<{date:Date, mode:string, clazz:string}>;
// todo: change type during implementation
  @Input() public dateDisabled:any;

  @Output() public selectionDone:EventEmitter<Date> = new EventEmitter<Date>(undefined);

  public onChange:any = Function.prototype;
  public onTouched:any = Function.prototype;

  public cd:NgModel;
  private _now:Date = new Date();
  private _activeDate:Date;

  @ViewChild(DatePickerInnerComponent) private datePicker: DatePickerInnerComponent;

  @Input()
  public get activeDate():Date {
    return this._activeDate || this._now;
  }

  public constructor(@Self() cd:NgModel) {
    this.cd = cd;
    // hack
    cd.valueAccessor = this;
  }

  public set activeDate(value:Date) {
    this._activeDate = value;
  }

  public onUpdate(event:any):void {
    this.cd.viewToModelUpdate(event);
  }

  public onSelectionDone(event:Date):void {
    this.selectionDone.emit(event);
  }

  // todo: support null value
  public writeValue(value:any):void {
    if (this.datePicker.compare(value, this._activeDate) === 0) {
      return;
    }
    if (value && value instanceof Date) {
      this.activeDate = value;
      this.datePicker.select(value);
      return;
    }

    this.activeDate = value ? new Date(value) : void 0;
  }

  public registerOnChange(fn:(_:any) => {}):void {
    this.onChange = fn;
  }

  public registerOnTouched(fn:() => {}):void {
    this.onTouched = fn;
  }
}

and here is my project structure. enter image description here

so, I want to know what is the problem of my code, and how can I solve this problem to stop my digging..

Answer 1

You need to import :

import { DatepickerModule } from 'ng2-bootstrap';

@NgModule({
  imports: [ 
    DatepickerModule.forRoot()
  ]
});

in app.module.ts