How to exclude moment locales from angular build?

Issue

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 ?

Solution

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:

1. ng add ngx-build-plus

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

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

3. Run:

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

   enter code here

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

Answered By - Dmitriy Ivanko