Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to exclude moment locales from angular build?

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 ?

like image 805
Shikha Avatar asked Apr 16 '18 07:04

Shikha


Video Answer


1 Answers

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)

like image 166
Dmitriy Ivanko Avatar answered Oct 13 '22 08:10

Dmitriy Ivanko