Only void and foreign elements can be self closed "ng-datepicker"

[azrinsani]

I don't know why.. nothing works!!! so frustrating...

On the screen it says:

ERROR in [at-loader] ./node_modules/ng2-datepicker/src/ng-datepicker/ng-datepicker.component.ts:186:31 TS2345: Argument of type 'Date | undefined' is not assignable to parameter of type 'Date | DatepickerOptions'. Type 'undefined' is not assignable to type 'Date | DatepickerOptions'.

On the console it says:

Only void and foreign elements can be self closed "ng-datepicker"

I use it as follows: <ng-datepicker [(ngModel)]="lastvisited" />

lastvisited is a date variable:

@Input() lastvisited: Date;

[jkuri]

use it as <ng-datepicker [(ngModel)]="lastvisited"></ng-datepicker>. not sure where did you saw Angular components used in self-closed style.

[azrinsani]

Thanks for quick reply! still i am having same problem

on screen it says:

ERROR in [at-loader] ./node_modules/ng2-datepicker/src/ng-datepicker/ng-datepicker.component.ts:186:31 TS2345: Argument of type 'Date | undefined' is not assignable to parameter of type 'Date | DatepickerOptions'. Type 'undefined' is not assignable to type 'Date | DatepickerOptions'.

however, the console error has changed:

ERROR TypeError: Cannot read property 'map' of null at splitDepsDsl (core.es5.js:8712) at def (core.es5.js:10695) at directiveDef (core.es5.js:10652) at View_AppComponent_Host_0 (AppComponent_Host.html:1) at proxyClass (compiler.es5.js:14962) at resolveDefinition (core.es5.js:8756) at ComponentFactory.create (core.es5.js:9859) at ComponentFactoryBoundToModule.create (core.es5.js:3333) at ApplicationRef_.bootstrap (core.es5.js:4768) at core.es5.js:4546

[jkuri]

please check the demo, clone the repository and run it locally.

[azrinsani]

i use the NPM install

[jkuri]

sure, but seems like you are doing something wrong. in this repository you have working example from which you can learn how to get it done right. check https://github.com/bleenco/ng2-datepicker/blob/master/src/components/app-home/app-home.component.html#L10 and https://github.com/bleenco/ng2-datepicker/blob/master/src/components/app-home/app-home.component.ts#L11-L17

[azrinsani]

it says now

ERROR in [at-loader] ./node_modules/ng2-datepicker/src/ng-datepicker/ng-datepicker.component.ts:190:36 TS2532: Object is possibly 'undefined'.

[jkuri]

do you have strict null checks on?

[azrinsani]

i've done this now:

<div class="divTableCell">
    <div *ngIf="date">
        <ng-datepicker [(ngModel)]="date" [options]="options"></ng-datepicker>
    </div>
</div>

but the problem is still occuring

ERROR in [at-loader] ./node_modules/ng2-datepicker/src/ng-datepicker/ng-datepicker.component.ts:186:31 TS2345: Argument of type 'Date | undefined' is not assignable to parameter of type 'Date | DatepickerOptions'. Type 'undefined' is not assignable to type 'Date | DatepickerOptions'.

[azrinsani]

My component class has the following:

export class PersonRowComponent { date: Date; constructor() { this.date = new Date(); } options: DatepickerOptions = { locale: enLocale };

[johnwheal]

@azrinsani Are you using Angular 5? I think this might be an issue introduced in Angular 5.

[boban100janovski]

The example on the home page of the repo says:

Example

<ng-datepicker [(ngModel)]="date" />

Which is not correct

[Devarajeshwaran]

Is there any resolution to this issue? I am getting the same issue as mentioned at the top. I use Angular 4.

[vishalhulawale]

Angular does not allow self-closing for components selectors in default namespace for an unknown reason. But if you change namespace then it works. try this <ns:ng-datepicker [(ngModel)]="date" /> where ns is the name of the custom/foreign namespace.