[datepicker, es2015] Cannot read property 'focus' of null

[mantyz]

Bug, feature request, or proposal:

Bug
Datepicker don't work if builded(--prod) with TS target = es2015

What is the expected behavior?

Datepicker must show dates.

What is the current behavior?

Datepicker don't show dates.

What are the steps to reproduce?

1. git clone https://github.com/mantyz/datepicker-repro.git
2. cd datepicker-repro
3. npm install
4. ng serve --prod
5. run localhost:4200
6. open calendar

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular CLI: 1.7.3
Node: 8.10.0
OS: linux x64
Angular: 5.2.8
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.4
@angular/cli: 1.7.3
@angular/material-moment-adapter: 5.2.4
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

OS: Debian 8
Browsers: Chrome 65, Firefox 58

Is there anything else we should know?

Worked if builded with target=es5.
And worked if ng serve --aot with target=es2015.

[mmalerba]

es2015 currently works in AOT mode only, see #8284 (comment)

[mantyz]

@mmalerba, Datepicker don't show dates if I build with --prod(AOT mode?). Why?

[mmalerba]

Did you try --aot --prod?

[mantyz]

Yes, I tried. But this did not give positive results.

[mmalerba]

Ok, I am able to reproduce as well, maybe its not related to #8284, will reopen.

[mmalerba]

Tried it out with the various flags that --prod sets:

ng serve --aot=true --environment=prod --output-hashing=all --sourcemaps=false \
--extract-css=true --named-chunks=false --build-optimizer=true

Everything seems to work fine, but it breaks with --prod so my guess is it has something to do with Uglify.

I also tried swapping out MatMomentDateModule for MatNativeDateModule. With latter it worked even with the --prod flag, so the issue seems to be specific to the Moment.js adapter or Moment.js itself.

[mmalerba]

After some further investigation, the issue appears to be in Moment.js here: https://github.com/moment/moment/blob/23104ffecdcf7a084babe20997d96a410540ff98/src/lib/units/month.js#L19-L26

The following function:

export function daysInMonth(year, month) {
    if (isNaN(year) || isNaN(month)) {
        return NaN;
    }
    var modMonth = mod(month, 12);
    year += (month - modMonth) / 12;
    return modMonth === 1 ? (isLeapYear(year) ? 29 : 28) : (31 - modMonth % 7 % 2);
}

is being compiled to:

function je(e, t) {
    if (isNaN(e) || isNaN(t))
        return NaN;
    return e += (t - NaN) / 12,
    NaN
}

[mantyz]

@mmalerba, thank you very much for your investigation.
Also I noticed that --prod works with Moment.js version below 2.19.0. Since version 2.19.0, this function has changed.
How do you think where to open an issue? UglifyJS or Moment.js?

[mmalerba]

@mantyz It seems like probably an Uglify issue, that transformation doesn't seem valid to me. But it may be worth reporting to Moment.js as well so they can work around it until it's fixed.

[itumanov]

@mantyz thanks, rollback momentjs version to 2.18.0 solved the problem in fastest way

[alan-agius4]

This should have been fixed as I am unable to replicate this any longer with the latest CLI.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}