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

Created on 9 Mar 2018 · 12Comments · Source: angular/components

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.
rep1

What are the steps to reproduce?

git clone https://github.com/mantyz/datepicker-repro.git
cd datepicker-repro
npm install
ng serve --prod
run localhost:4200
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.

Source

mantyz

👍4

Most helpful comment

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
}

mmalerba on 5 Apr 2018

👍2

All 12 comments

es2015 currently works in AOT mode only, see https://github.com/angular/material2/issues/8284#issuecomment-354274079

mmalerba on 2 Apr 2018

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

mantyz on 4 Apr 2018

Did you try --aot --prod?

mmalerba on 4 Apr 2018

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

mantyz on 4 Apr 2018

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

mmalerba on 4 Apr 2018

👍1

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 on 5 Apr 2018

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
}

mmalerba on 5 Apr 2018

👍2

@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?

mantyz on 5 Apr 2018

@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.

mmalerba on 5 Apr 2018

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