Ionic-app-scripts: moment.js locales not supported anymore

[peterpeterparker]

Short description of the problem:

I set globally the locale support in app.component.ts. Using the last version of ionic-app-scripts, 1.1.2, using different locales with moment.js seems to doesn't work anymore. When I run the app i always see the formatted dates in english.

What behavior are you expecting?

It should be possible to use moment.js with different locales as it always was while building the app with ionic-app-scripts. It's working fine while building an app with ionic-app-scripts 1.1.0

Steps to reproduce:

1. See code below to set globally the moment.js locales
2. Build app with ionic-app-scripts 1.1.2
3. Run the app and display/format a date

app.component.ts

import moment from 'moment';

import 'moment/src/locale/fr';
import 'moment/src/locale/de';
import 'moment/src/locale/it';

....

// After init
let userLang = navigator.language.split('-')[0];
userLang = /(de|en|fr|it)/gi.test(userLang) ? userLang : 'en';
// Here set the locales to use globally
moment.locale(userLang);

Which @ionic/app-scripts version are you using?

1.1.2

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

moment.js version:

"moment": "^2.17.1"

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.2.1
Xcode version: Xcode 8.2.1 Build version 8C1002

[peterpeterparker]

With source-map-explorer I saw that ionic-app-scripts 1.1.2 didn't seems to automatically include the locales.js files in the build, that's why the locales aren't displayed.

Did I miss a configuration, if yes, how to solve that? If no could you improve that?

with v1.1.2:

with v1.1.0:

[danbucholtz]

Do you have the tree shaking optimization turned on? Can you upload a repo so I can reproduce?

Sounds like a bug to me. Seems strange to me, nothing really changed from 1.1.0 to .1.1.2 that would affect this I don't think.

Thanks,
Dan

[peterpeterparker]

@danbucholtz no tree shaking, my config:

"config": {
   "ionic_sass": "./scripts/sass.config.js",
   "ionic_copy": "./scripts/copy.config.js",
  "ionic_source_map_type": "source-map"
 }

it's a private project/repo but if you send me an e-mail I would like to grant you the access

[danbucholtz]

I cannot reproduce this with 1.3.1. It seems strange too. It doesn't seem like something any of our code would know about or have an impact on. Hmm. Let me know if you run into it again with 1.3.1. FWIW, I am also using Angular 2.4.5.

Thanks,
Dan

[peterpeterparker]

@danbucholtz I could reproduce the problem with a blank starter app ... but maybe I just miss something you know

what I do:

1. checkout https://github.com/peterpeterparker/ionic2Moment.git
2. npm install
3. ionic serve
4. in www/build I run source-map-explorer main.js main.js.map

[danbucholtz]

Try with Angular 2.4.5. I think this issue is resolved.

Thanks,
Dan

[peterpeterparker]

@danbucholtz gonna try, but actual Ionic version use Angular 2.2.1, isn't that a problem and risky?

[danbucholtz]

Try it out and let me know how it goes. I think we're releasing Ionic with 2.4.5 Angular on Wednesday. Realistically, it should be fine.

Thanks,
Dan

[peterpeterparker]

@danbucholtz unfortunately no it doesn't work. I updated the demo app I posted here above with Angular 2.4.5 but still no success, the locales of moment.js aren't in the build.

Check the demo app, did I miss something?

Thx you in advance for your feedback

P.S.: new source-map-explorer with Angular 2.4.5

[danbucholtz]

I'll check out your sample app.

Thanks,
Dan

[Dasiim]

I have the same issue with
Ionic 2.0.0
ionic/app-scripts 1.1.1
Angular 2.2.1
Moment 2.17.1

The issue came when updating ionic-app-scripts from 1.0.0 to 1.0.1.

[alan-agius4]

Why has this issue been marked as closed when there is no fix for it?

[danbucholtz]

@alan-agius4,

I haven't been able to recreate it. I am thinking it's a webpack issue, not an Ionic issue.

Thanks,
Dan

[danbucholtz]

This seems like it's working to me.

import moment from 'moment';

import * as french from 'moment/src/locale/fr';
import * as de from 'moment/src/locale/de';
import * as italian from 'moment/src/locale/it';

console.log('french: ', french);
console.log('de: ', de);
console.log('italian: ', italian);

private initializeTranslateServiceConfig() {
    console.log('blah');
    let userLang = navigator.language.split('-')[0];
    userLang = /(de|en|fr|it)/gi.test(userLang) ? userLang : 'en';

    var result = moment.locale(userLang);
    console.log('moment.locale: ', moment.locale);
    console.log('result: ', result);
  }

[peterpeterparker]

@alan-agius4 @Dasiim it seems I found a solution, would be cool if you could try and confirm it.

Till 1.0.0 the locales should had been imported like following:

import 'moment/src/locale/fr';
import 'moment/src/locale/de';
import 'moment/src/locale/it’;

But now it seems that they should be imported like following:

import 'moment/locale/fr';
import 'moment/locale/de';
import 'moment/locale/it’;

I tried these changes with "ionic serve" and "ionic build ios --prod" and both seems to have works well.

Furthermore, there is a really good side effect to that changes, if I understood correctly, now only these locales gonna be loaded in my app and not all the locales like as it was the case, means the build gonna be lighter and means less data to load on the boot time :)

thx for the support @danbucholtz

[Dasiim]

Yes, it works like that, but it's problematic :/

Ill try to explain my situation a bit:
We are loading the locales dynamically, because we might have different set of locales needed at some particular time. Importing all of them wouldn't make sense(lose performance).
Before that change, moment was able to import all the necessary locales itself. Could it be changed back to that way?
I'm not sure why it works like that(removing "src" from path).
Would it be possible to support the old way also?(probably you know the place where the change happened already)

[peterpeterparker]

@Dasiim I didn't tried by myself but maybe try then:

import 'moment/min/locales';

instead of all separate includes

[Dasiim]

But then Id include all of them while i only need for example 3. We would import 190kb instead of 10kb what we actually need.

[peterpeterparker]

@Dasiim sorry I don't understand you then. You have got two choices in my point of view:

1. Load all locales (import 'moment/min/locales';)
2. Load a list of specific locales (import 'moment/locale/fr'; import 'moment/locale/de'; etc...)

I displayed both ways here above. I guess that if you want something else you may have to post a question/issue on the moment.js GitHub itself

[Dasiim]

Before we included the needed locales with webpack and they were imported automatically. Now it seems we need to import them manually which is not good.

[Dasiim]

Basically we used this before: https://github.com/webpack/webpack/issues/87
Using ContextReplacementPlugin, we remove all the locales that are not needed.
For example: new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, /^.\/(en|cs)$/)
So will only have en & cs locales loaded.

[alexkonovalov]

We found a solution with @Dasiim.
Instead of using webpack.ContextReplacementPlugin("/moment[\/]locale$/", /^./(en|cs)$/) for filtering out the redundant locales (that worked for us before) we now implicitly add them to the list of Wepback entry points.