Only on production environment the input click generates an error

[CriPstian]

Everything on development works just the way it should. On the click event the calendar is shown and enables me to pick a date. When serving on production mode with angular-cli, with ng serve --prod, clicking on the input throws an error in the console that looks like the one in the attachment.

<input mdInput class="picker-input" [ngModel]="transactionForm.date | date: 'short'" required="true" [(dateTimePicker)]="transactionForm.date" placeholder="Date" dividerColor="none" readonly [theme]="'green'" [locale]="'ro'">

So here is the console error that I receive:

I can see that is something related to AOT and the fact that the dialog creation is created in a dynamic way. Please help me with some suggestions or maybe this is actually a bug. I also provided the package.json dependencies so that you can see what versions I am using. Sorry for the long issue. Hope this helps. Thanks in advance.

"dependencies": {
    "@angular/common": "^2.4.6",
    "@angular/compiler": "^2.4.6",
    "@angular/core": "^2.4.6",
    "@angular/forms": "^2.4.6",
    "@angular/http": "^2.4.6",
    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "^2.4.6",
    "@angular/platform-browser-dynamic": "^2.4.6",
    "@angular/router": "^3.3.1",
    "angular-oauth2-oidc": "^1.0.20",
    "bootstrap": "^3.3.7",
    "chart.js": "^2.5.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.1.1",
    "moment": "^2.18.0",
    "ng2-charts": "^1.5.0",
    "ng2-cookies": "^1.0.6",
    "ng2-date-time-picker": "^2.0.12",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0-rc.2",
    "@angular/compiler-cli": "^2.4.6",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.64",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage": "^1.1.1",
    "karma-firefox-launcher": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-remap-istanbul": "^0.6.0",
    "phantomjs": "^2.1.7",
    "phantomjs-prebuilt": "^2.1.14",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }

[DanielYKPan]

@CriPstian Try the latest version of "@angular/cli": "1.0.0", and see if the error still exists.

[CriPstian]

That solved it after upgrading to @angular/cli@1.0.0. Thank you so very much.

[spy4x]

Hello @DanielYKPan and thank you a lot for this awesome datetimepicker 👍

Unfortunately I met the same issue with AOT, Angular v4.0, Angular CLI v1.0. Some details below:

<div 
  [(dateTimePicker)]="value"
  [returnObject]="'moment'"
  [mode]="'dropdown'"
  [style.width]="'250px'">
  <input type=" value="{{value.format('YYYY.MM.DD HH:mm')}}">
</div>

import { Component } from '@angular/core';
import * as moment from 'moment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  value = moment();
}

I've created repository to show this issue:

https://github.com/spy4x/detetimepicker-bug-demo

Just a demo repo, will be removed once issue solved.

Setup:

{
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "ng-pick-datetime": "^4.0.5",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

[CriPstian]

I am still having this issue with a similar configuration. This should be reopened in my opinion.

[DanielYKPan]

@CriPstian I will look at it. That may be the locale problem.

[DanielYKPan]

@CriPstian @spy4x

Guys, I searched the problem and I found this.

Basically, because in my directive I create a module dynamically and this procedure is running in JIT. So when you run AOT, it would cause the bug. Right now angular could not run both JIT and AOT at the same time.

And now I already fixed the bug, but I haven't published a new version. Because I still have to run some tests. Hopefully, I will published package at this weekend.

Thanks guys.

[DanielYKPan]

@CriPstian @spy4x

Guys, the package has been updated. Please update to the latest package.

If you find any problems, please let me know.

Thanks.

[spy4x]

@DanielYKPan It works for me, thanks a lot! That was pretty fast fix, respect!

[ashwinirajput]

@spy4x ,How you fixed it ,I need your help i am trouble in same issue.

[DanielYKPan]

@ashwinirajput I just create a new project ng new My_Project

and Install the package npm install ng-pick-datetime --save

and run ng serve --prod

and it works well

[spy4x]

@ashwinirajput Hey!

I use Yarn, so I just ran $ yarn upgrade ng-pick-datetime. This package was updated to latest version with the fix @DanielYKPan shipped recently. And DateTimePicker now works in my app when I run it with $ ng serve -aot and $ ng build -prod -aot.

If you use npm instead of yarn - try $ npm outdated and $ npm update ng-pick-datetime. Some details about it here: http://stackoverflow.com/questions/16525430/npm-check-and-update-package-if-needed

Make sure you have latest version of ng-pick-datetime set in your package.json, which is 4.0.7.

Have fun!

[ashwinirajput]

@DanielYKPan @spy4x after installing ng-pick-date time getting some unexpexted error Error: core_1.InjectionToken is not a constructor Evaluating http://localhost:888/node_modules/ng-pick-datetime/lib/translations.js Evaluating http://localhost:888/node_modules/ng-pick-datetime/lib/dialog.component.js Evaluating http://localhost:888/node_modules/ng-pick-datetime/lib/picker.directive.js Evaluating http://localhost:888/node_modules/ng-pick-datetime/lib/picker.module.js Evaluating http://localhost:888/node_modules/ng-pick-datetime/index.js

[ashwinirajput]

@CriPstian how you fixed in angular 2 I don't want to upgrade at angular 4.

[CriPstian]

@ashwinirajput I do not think I fixed it, at that time, I ran my build with angular-cli options like this:

ng build --prod --no-aot

This way It did a just in time compilation, just la like development. Angular 4 has nothing to do with this issue, you just have to upgrade the ng-pick-datetime to the latest version. I did not get a chance to test it unfortunately :(

[DanielYKPan]

@CriPstian

What problem your app had was run time compiler error. This was because the picker used a dynamic module. And that procedure was running in JIT. So when you running AOT, it caused the run time compiler error. And I already fixed this in the latest version. @spy4x said the latest version picker works on his application. You could have a try when you have time :)

What @ashwinirajput said the error was caused by 'InjectionToken'. Because I added a translate service which is using 'InjectionToken'. 'InjectionToken' is from Angular 4. It is a replacement for 'OpaqueToken' form angular 2. So when you using the picker in angular 2 apps, it causes the error.

[ashwinirajput]

@DanielYKPan @spy4x @CriPstian If I want to run in angular 2 by using ng2-date-time-picker.then what is the fix to remove run time error.

[CriPstian]

The fix works perfect. Thank you very much for all the support. I was able to add it to my angular4 project.

[DanielYKPan]

@CriPstian Good to hear that.

[paru-ramya]

I am facing the same issue as ashwinirajput. Is this picker not compatible with angular2 apps?

[DanielYKPan]

@paru-ramya No, the latest version only compatible with angular4

[kakalos12]

It doesn't work on my project. @DanielYKPan

{
  "name": "sesmailer",
  "version": "1.0.0",
  "license": "Nguyen Huu Dong",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.1.0",
    "@angular/common": "^4.1.0",
    "@angular/compiler": "^4.1.0",
    "@angular/compiler-cli": "^4.1.0",
    "@angular/core": "^4.1.0",
    "@angular/forms": "^4.1.0",
    "@angular/http": "^4.1.0",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "^4.1.0",
    "@angular/platform-browser-dynamic": "^4.1.0",
    "@angular/platform-server": "^4.1.0",
    "@angular/router": "^4.1.0",
    "angular2-ladda": "latest",
    "animate.css": "3.5.2",
    "bootstrap": "latest",
    "core-js": "latest",
    "font-awesome": "latest",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "metismenu": "latest",
    "ng-pick-datetime": "^4.0.7",
    "ng-selectize": "^1.0.9",
    "ng2-pagination": "latest",
    "ngx-toastr": "latest",
    "rxjs": "latest",
    "selectize": "^0.12.4",
    "summernote": "^0.8.2",
    "ts-helpers": "latest",
    "typescript": "^2.2.1",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.46",
    "@types/node": "7.0.10",
    "@angular/cli": "1.0.0",
    "codelyzer": "2.0.1",
    "jasmine-core": "latest",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.5.0",
    "karma-chrome-launcher": "latest",
    "karma-cli": "latest",
    "karma-jasmine": "latest",
    "karma-remap-istanbul": "0.6.0",
    "protractor": "latest",
    "ts-node": "3.0.2",
    "tslint": "4.5.1",
    "typescript": "latest"
  }
}

[kakalos12]

Sorry, it was cached. It's working now.