Ngx-bootstrap: Datepicker does not compiles using Ivy compiler --prod

[beto-rodriguez]

My app uses the BsDatepicker module, in development it works nice, it used to compile properly in angular 6, I just updated to angular 7, and enabled the new compiler (Ivy), in development it compiles, in production using the --prod param I get the following error:

ERROR in : Template parse errors:
The pipe 'async' could not be found ("<!-- days calendar view mode --> <div class="bs-datepicker" [ngClass]="containerClass" [ERROR ->]*ngIf="viewMode | async"> <div class="bs-datepicker-container"> <!--calendars--> <div class="bs-calen"): C:/dev/nomiexpress/NomiExpressWebClient1/ClientApp/node_modules/ngx-bootstrap/datepicker/themes/bs/bs-datepicker-container.component.d.ts.BsDatepickerContainerComponent.html@0:87
The pipe 'async' could not be found ("| async"> <div class="bs-datepicker-container"> <!--calendars--> <div class="bs-calendar-container" [ERROR ->][ngSwitch]="viewMode | async" role="application"> <!--days calendar--> <div *ngSwitchCase="'day'"> <b"): C:/dev/nomiexpress/NomiExpressWebClient1/ClientApp/node_modules/ngx-bootstrap/datepicker/themes/bs/bs-datepicker-container.component.d.ts.BsDatepickerContainerComponent.html@0:203
The pipe 'async' could not be found ("lication"> <!--days calendar--> <div *ngSwitchCase="'day'"> <bs-days-calendar-view *ngFor="let calen[ERROR ->]dar of (daysCalendar | async)" [class.bs-datepicker-multiple]="(daysCalendar | async)?.length > 1" [c"): C:/dev/nomiexpress/NomiExpressWebClient1/ClientApp/node_modules/ngx-bootstrap/datepicker/themes/bs/bs-datepicker-container.component.d.ts.BsDatepickerContainerComponent.html@0:342
The pipe 'async' could not be found ("<div *ngSwitchCase="'day'"> <bs-days-calendar-view *ngFor="let calendar of (daysCalendar | async)" [[ERROR ->]class.bs-datepicker-multiple]="(daysCalendar | async)?.length
> 1" [calendar]="calendar" [options]="o"): C:/dev/nomiexpress/NomiExpressWebClient1/ClientApp/node_modules/ngx-bootstrap/datepicker/themes/bs/bs-datepicker-container.component.d.ts.BsDatepickerContainerComponent.html@0:374
The pipe 'async' could not be found ("| async)" [class.bs-datepicker-multiple]="(daysCalendar | async)?.length > 1" [calendar]="calendar" [ERROR ->][options]="options | async" (onNavigate)="navigateTo($event)"
(onViewMode)="setViewMode($event)" (onH"): C:/dev/nomiexpress/NomiExpressWebClient1/ClientApp/node_modules/ngx-bootstrap/datepicker/themes/bs/bs-datepicker-container.component.d.ts.BsDatepickerContainerComponent.html@0:463
The pipe 'async' could not be found ("/div> <!--months calendar--> <div *ngSwitchCase="'month'"> <bs-month-calendar-view *ngFor="let calen[ERROR ->]dar of (monthsCalendar | async)" [class.bs-datepicker-multiple]="(daysCalendar | async)?.length > 1" "): C:/dev/nomiexpress/NomiExpressWebClient1/ClientApp/node_modules/ngx-bootstrap/datepicker/themes/bs/bs-datepicker-container.component.d.ts.BsDatepickerContainerComponent.html@0:761
The pipe 'async' could not be found ("*ngSwitchCase="'month'"> <bs-month-calendar-view *ngFor="let calendar of (monthsCalendar | async)" [[ERROR ->]class.bs-datepicker-multiple]="(daysCalendar | async)?.length
> 1" [calendar]="calendar" (onNavigate)"): C:/dev/nomiexpress/NomiExpressWebClient1/ClientApp/node_modules/ngx-bootstrap/datepicker/themes/bs/bs-datepicker-container.component.d.ts.BsDatepickerContainerComponent.html@0:795
The pipe 'async' could not be found (" </div> <!--years calendar--> <div *ngSwitchCase="'year'"> <bs-years-calendar-view *ngFor="let calen[ERROR ->]dar of (yearsCalendar | async)" [class.bs-datepicker-multiple]="(daysCalendar | async)?.length > 1" ["): C:/dev/nomiexpress/NomiExpressWebClient1/ClientApp/node_modules/ngx-bootstrap/datepicker/themes/bs/bs-datepicker-container.component.d.ts.BsDatepickerContainerComponent.html@0:1157
The pipe 'async' could not be found ("v *ngSwitchCase="'year'"> <bs-years-calendar-view *ngFor="let calendar of (yearsCalendar | async)" [[ERROR ->]class.bs-datepicker-multiple]="(daysCalendar | async)?.length
> 1" [calendar]="calendar" (onNavigate)"): C:/dev/nomiexpress/NomiExpressWebClient1/ClientApp/node_modules/ngx-bootstrap/datepicker/themes/bs/bs-datepicker-container.component.d.ts.BsDatepickerContainerComponent.html@0:1190

To reproduce, use angular 7, and enable Ivy, in your tsconfig.json:

  "angularCompilerOptions": {
    "enableIvy": false // if true, we use the new version of the angular compiler... I get the exeption
  }

then

ng build --prod

As a work around i disabled the new compiler.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 3.0.1 // in 3.1.1 I get another exception similar to https://github.com/valor-software/ngx-bootstrap/issues/2742

Angular: 7.0.4

Bootstrap: 4.1.3

Build system: Angular CLI (7.0.6), webpack (4.26.0), starter seed:

[valorkin]

hey, Ivy has not yet finished thing, I want to use it too :D
I am constantly monitoring and trying to make ngx-bootstrap compatible with it Ivy
as soon it will work I will post about in twitter :D

[beto-rodriguez]

Awesome! thanks for the info

[FrancescoBorzi]

hello there, @valorkin just FYI I've just tried Ivy too and this is what I get when I run ng build --prod:

ERROR in : Template parse errors:
Binding to event property 'onlyCurrentMonth' is disallowed for security reasons, please use (lyCurrentMonth)=...
If 'onlyCurrentMonth' is a directive input, make sure the directive is imported by the current module. ("ateDisabled]="dateDisabled"
[dayDisabled]="dayDisabled"
[ERROR ->][onlyCurrentMonth]="onlyCurrentMonth"
[shortcutPropagation]="shortcutPropagatio"): /home/francesco.borzi/sources/IMS-frontend/node_modules/ngx-bootstrap/datepicker/ngx-bootstrap-datepicker.d.ts.DatePickerComponent.html@22:22

I hope that helps

[suwigyarathore]

any update on this as ivy is just around the corner

[ceoaliongroo]

I need to use Angular 8 and Ivy. already working in angular 9 next

It's possible to work on this? @valorkin

[ceoaliongroo]

Hi @valorkin , @Domainv, @IlyaSurmay

Version "ngx-bootstrap": "5.3.2" when enable ivy return the error

ERROR in Symbol BsDaterangepickerInlineContainerComponent declared in D:/Dev/WEB/app/node_modules/ngx-bootstrap/datepicker/themes/bs/bs-daterangepicker-inline-container.co
mponent.d.ts is not exported from ngx-bootstrap (import into D:/Dev/WEB/app/src/app/core/systems/distribution/distribution-resend/forms/distribution-resend-search-form/dis
tribution-resend-search-form.component.ts)

[ceoaliongroo]

Solve in #5257