How to exclude moment locales from angular build?

Question

In my angular 5 application, when I create build using

ng build --prod --sm

and open source map explorer, moment takes lot of space in the main.js file. I have found all the locales gets loaded when I use

import * as moment from 'moment';

I have used material-moment-adapter to some functionality in the application that requires the moment package also.

I have created the application using angular-cli. I have found many links that excludes locales using settings in webpack.config.js Is there any way to exclude locales using angular-cli ?

You can either use lazy loading or switch to the native module for material. I would recommend the second option. — , Apr 16 '18 at 07:03
can you please provide some example for material native module? — Shikha, Apr 16 '18 at 07:19

score 13 · Accepted Answer · edited Aug 23 '23 at 02:03

13

This article describe good solution: https://medium.jonasbandi.net/angular-cli-and-moment-js-a-recipe-for-disaster-and-how-to-fix-it-163a79180173

Briefly:

ng add ngx-build-plus

Add a file webpack.extra.js in the root of your project:

const webpack = require('webpack');
module.exports = {
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ]
}

Run:

npm run build --prod --extra-webpack-config webpack.extra.js

Warning moment.js has been deprecated officially https://momentjs.com/docs/#/-project-status/ (try use day.js or luxon)

edited Aug 23 '23 at 02:03

George Lords of Castle

899
2
9
18

answered Feb 28 '19 at 12:20

Dmitriy Ivanko

950
8
17

when i use this answer the compiler gives this error An unhandled exception occurred: Project 'webpack.extra.js' does not exist. – geek man Jul 25 '20 at 16:34
and when I change npm run build with ng build the compiler gives this error: An unhandled exception occurred: Cannot find module '/Users/test/Desktop/projects/shb2c/webpack.extra.js' Require stack: – geek man Jul 25 '20 at 16:41
Check step 2: ADD/CREATE webpack.extra.js in the root of your project – Dmitriy Ivanko Aug 17 '20 at 13:01
2

moment.js deprecated ? – Wang Liang Dec 10 '20 at 05:52
giving me an error: ``` Unknown option: '--extra-webpack-config' Unknown option: 'webpack.extra.js' ``` – Ashish Mishra Jan 09 '23 at 15:12

score 5 · Answer 2 · answered Mar 13 '19 at 05:19

5

If you don't want to use any third party libraries the simplest way to do this is to add the following in compilerOptions of your tsconfig.json file

"paths": {
  "moment": [
    "../node_modules/moment/min/moment.min.js"
  ]
}

answered Mar 13 '19 at 05:19

Zeeshan Adnan

769
6
10

4

I was not able to make it work with this solution if moment-timezone is used. – tmorell Mar 13 '19 at 17:52
this doesnt provide moment directive – Santosh Feb 18 '22 at 17:11

score 4 · Answer 3 · answered Oct 01 '21 at 10:21

For anyone on angular 12 or latest

This does not work for me

const webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ]
}

However this does

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/
    })
  ]
};

Daniel · Answer 4 · 2020-12-29T02:56:16.657

2

There is another solution in this Angular Issue: https://github.com/angular/angular-cli/issues/6137#issuecomment-387708972

Add a custom path with the name "moment" so it is by default resolved to the JS file you want:

"compilerOptions": {
    "paths": {
      "moment": [
        "./node_modules/moment/min/moment.min.js"
      ]
    }
}

edited Dec 29 '20 at 02:56

answered Dec 29 '20 at 00:20

Daniel

21,933
14
72
101

score 0 · Answer 5 · answered Nov 04 '21 at 15:53

In Angular 12, I did the following:

npm i --save-dev @angular-builders/custom-webpack

to allow using a custom webpack configuration.

npm i --save-dev moment-locales-webpack-plugin
npm i --save-dev moment-timezone-data-webpack-plugin

Then modify your angular.json as follows:

    ...
    "architect": {
        "build": {
            "builder": "@angular-builders/custom-webpack:browser",
                "options": {
                    "customWebpackConfig": {
                        "path": "./extra-webpack.config.js"
                    },
                    ...

and in the extra-webpack.config.js file:

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin');

module.exports = {
    plugins: [
        new MomentLocalesPlugin({
            localesToKeep: ['en-ie']
        }),
        new MomentTimezoneDataPlugin({
            matchZones: /Europe\/(Belfast|London|Paris|Athens)/,
            startYear: 1950,
            endYear: 2050,
        }),
    ]
};

Modify the above options as needed, of course. This gives you far better control on which exact locales and timezones to include, as opposed to the regular expression that I see in some other answers.

yLoeffler · Answer 6 · 2022-04-08T10:32:11.697

the solutions above didn't work for me because they address the wrong path (don't use ../ ) in the tsconfig.app.json

{
...
   "compilerOptions": {
      "paths": {
        "moment": [
          "node_modules/moment/min/moment.min.js"
        ]
      }
   }
}

Works for me in Angular 12.2.X. The changes must be done in the tsconfig.app.json, than also the type information of your IDE will work.

Don't change it in the tsconfig.json or your IDE will lose type information.

This fix the usage in the app as in the lib. I used source-map-explorer to verify it.

ng build --sourceMap=true --namedChunks=true --configuration production && source-map-explorer dist/**/*.js

score 0 · Answer 7 · answered May 29 '22 at 20:46

I had the same problem with momentjs library and solve it as below:

The main purpose of this answer is not to use IgnorePlugin for ignoring the library but I use ContextReplacementPlugin to tell the compiler which locale files I want to use in this project.

Do all of the configurations mentioned in this answer: https://stackoverflow.com/a/72423671/6666348

Then in your webpack.config.js file write this:

const webpack = require("webpack");

module.exports = {
    plugins: [
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /(en|fr)$/)
    ]
};

This configuration will add only en and fr locale in your application dist folder.

score 0 · Answer 8 · edited Dec 22 '22 at 09:00

0

You can try to use moment-mini-ts instead of moment

npm i moment-mini-ts

import * as moment from 'moment-mini-ts'

Don’t forget to uninstall moment

npm uninstall moment

I’m using angular 9

edited Dec 22 '22 at 09:00

Suraj Rao

29,388
11
94
103

answered Dec 22 '22 at 08:55

Marina Osama

41
3

How to exclude moment locales from angular build?

8 Answers8

Linked