Search code examples
angularnpmdatepickerangular-material2production

Angular4 - Datepicker not working in ng build --prod


I am working on a project which runs on Spring boot + Angular4. I use Angular material datepicker components (from official angular material site)

When I run ng serve everything works fine I can select date and bind into Date property without any problem.

But when I try production version (usingng build --prod and ng serve --prod ), my datepickers dont work and it looks like this

Console says (full error)

`Cannot convert undefined or null to object
at new DateTimeFormat (native)`

My code:

<md-input-container>
    <input mdInput  (keypress)="$event.preventDefault()" (click)="dateTo.open()" [(ngModel)]="dateToValue" [mdDatepicker]="dateTo" placeholder="To">
    <md-datepicker-toggle mdSuffix [for]="dateTo"></md-datepicker-toggle>
</md-input-container>
<md-datepicker #dateTo ></md-datepicker>

My app.module.ts

import { MaterialModule, MdDialogModule, MdDatepickerModule, MdNativeDateModule, MdInputModule } from '@angular/material';

I use @angular/material@2.0.0-beta.8. and @angular/cdk@2.0.0-beta.8.

I tried to install newer versions (@2.0.0-beta.12) and change code following official GitHub site examples and breaking changes , but still the same. I also tried it without ngModel property , run in many browsers but nothing changed. I just cant understand why --prod crashes my datepickers and works fine in ng serve


Solution

  • So finally after many many hours I found solution for my problem!

    I installed the newest version of @angular/material@2.0.0-beta.12 again and all what has to be done was insert these lines of code in your MaterialComponents.module (or your specific name) :

    export class MaterialComponentsModule {
      constructor(private dateAdapter: DateAdapter<Date>) {
        dateAdapter.setLocale("sk-SK");
      }
     }
    

    In my opinion in development version it was not necessary becasue of inserting some value by default, but in production version it didn't happend. Maybe it could be caused by using ngx-translate library without setting default language or something other.

    But now , everything works as expected :)