What is the process for eliminating moment locales from an Angular build?

Question

What is the process for eliminating moment locales from an Angular build?

When I build my Angular 5 application with the command:

ng build --prod --sm

I noticed that the main.js file contains a lot of excess space occupied by moment. It seems all the locales are being loaded when I include:

import * as moment from 'moment';

Additionally, I have utilized material-moment-adapter for specific functionality in my app which also requires the moment package.

My application was created using angular-cli. I have come across several resources mentioning excluding locales via webpack.config.js settings. Is there a way to achieve this directly within angular-cli?

angular angular2-moment

Answer 1

Answer №1

This article provides a great solution to the problem:

In summary:

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

Important Note: moment.js has been officially deprecated. https://momentjs.com/docs/#/-project-status/ (consider using day.js or luxon instead)

Answer 2

This article provides a great solution to the problem:

In summary:

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

Important Note: moment.js has been officially deprecated. https://momentjs.com/docs/#/-project-status/ (consider using day.js or luxon instead)

Answer 3

Answer №2

To achieve this without relying on external libraries, you can easily implement the following code snippet within the compilerOptions section of your tsconfig.json file:

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

Answer 4

To achieve this without relying on external libraries, you can easily implement the following code snippet within the compilerOptions section of your tsconfig.json file:

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

Answer 5

Answer №3

If you are using Angular 12 or a more recent version

This solution didn't seem to work for me personally

const webpack = require('webpack');

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

However, this alternative did the trick for me

const webpack = require('webpack');

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

Answer 6

If you are using Angular 12 or a more recent version

This solution didn't seem to work for me personally

const webpack = require('webpack');

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

However, this alternative did the trick for me

const webpack = require('webpack');

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

Answer 7

Answer №4

Check out this alternative solution for the Angular problem discussed: https://github.com/angular/angular-cli/issues/6137#issuecomment-387708972

Simply include a custom path called "moment" to ensure that it automatically points to the desired JS file:

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

Answer 8

Check out this alternative solution for the Angular problem discussed: https://github.com/angular/angular-cli/issues/6137#issuecomment-387708972

Simply include a custom path called "moment" to ensure that it automatically points to the desired JS file:

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

Answer 9

Answer №5

When working with Angular 12, I took the following steps:

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

This allowed me to utilize a custom webpack configuration.

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

Next, I made adjustments to my angular.json file as shown below:

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

After that, 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,
        }),
    ]
};

You can customize the options above according to your requirements. This approach provides precise control over which locales and timezones are included, compared to using regular expressions found in other solutions.

Answer 10

When working with Angular 12, I took the following steps:

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

This allowed me to utilize a custom webpack configuration.

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

Next, I made adjustments to my angular.json file as shown below:

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

After that, 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,
        }),
    ]
};

You can customize the options above according to your requirements. This approach provides precise control over which locales and timezones are included, compared to using regular expressions found in other solutions.

Answer 11

Answer №6

Unfortunately, the previously suggested solutions didn't work for me as they were focused on the incorrect path (avoid using ../) in the tsconfig.app.json file.

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

Thankfully, I found a working solution in Angular 12.2.X by making changes directly in the tsconfig.app.json file. This not only fixed the issue but also ensured that the IDE's type information worked correctly. https://i.stack.imgur.com/FJEDw.png

https://i.stack.imgur.com/NqAMz.png

It's crucial to avoid modifying the tsconfig.json file, as doing so could cause your IDE to lose important type information. https://i.stack.imgur.com/Qb6vY.png

This adjustment resolved the usage problem within both the app and the library. I verified this using source-map-explorer tool.

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

https://i.stack.imgur.com/DdLJh.png

Answer 12

Unfortunately, the previously suggested solutions didn't work for me as they were focused on the incorrect path (avoid using ../) in the tsconfig.app.json file.

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

Thankfully, I found a working solution in Angular 12.2.X by making changes directly in the tsconfig.app.json file. This not only fixed the issue but also ensured that the IDE's type information worked correctly. https://i.stack.imgur.com/FJEDw.png

https://i.stack.imgur.com/NqAMz.png

It's crucial to avoid modifying the tsconfig.json file, as doing so could cause your IDE to lose important type information. https://i.stack.imgur.com/Qb6vY.png

This adjustment resolved the usage problem within both the app and the library. I verified this using source-map-explorer tool.

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

https://i.stack.imgur.com/DdLJh.png

Answer 13

Answer №7

I encountered a similar issue with the momentjs library and was able to resolve it by taking the following steps:

Instead of using the IgnorePlugin to exclude the library, I utilized the ContextReplacementPlugin to specify which locale files should be included in the project.

Follow all of the steps outlined in this answer:

In your webpack.config.js file, include the following code snippet:

const webpack = require("webpack");

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

By implementing this configuration, only the en and fr locale files will be added to your application's distribution folder.

Answer 14

I encountered a similar issue with the momentjs library and was able to resolve it by taking the following steps:

Instead of using the IgnorePlugin to exclude the library, I utilized the ContextReplacementPlugin to specify which locale files should be included in the project.

Follow all of the steps outlined in this answer:

In your webpack.config.js file, include the following code snippet:

const webpack = require("webpack");

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

By implementing this configuration, only the en and fr locale files will be added to your application's distribution folder.

Answer 15

Answer №8

If you're using Angular 9, consider switching to moment-mini-ts in place of moment

npm i moment-mini-ts

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

Remember to uninstall the original moment package

npm uninstall moment

The transition to angular 9 should be smooth with this change

Answer 16

If you're using Angular 9, consider switching to moment-mini-ts in place of moment

npm i moment-mini-ts

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

Remember to uninstall the original moment package

npm uninstall moment

The transition to angular 9 should be smooth with this change

What is the process for eliminating moment locales from an Angular build?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Exploring the Secrets of JSON Parsing in Angular

Reusing observables after encountering errors

Combine the information from 3 separate subscriptions into a single object using RxJS in Angular 9

Why isn't my Visual Studio updating and refreshing my browser after making changes to the Angular project?

What is the best way to transfer PHP form data to an Angular2 application?

Troubleshooting video streaming loading issues caused by 404 errors in URL paths with videojs

It seems that Angular2 Universal is experiencing some instability as it crashes frequently with the message "[nodemon] app crashed - waiting for file

Socket.io: The other client will only update when there is interaction happening

Replicate the process of transferring table rows to the clipboard, but exclusively copying the contents

Utilizing Angular 2's ViewChild within the <router-outlet> Tag

The Validator.js module cannot be located - Unable to resolve 'http' in the client

Issue updating @angular/core in Angular CLI caused by rxjs dependency

Navigating the way: Directing all TypeScript transpiled files to the build folder

Determine to which observable in the list the error corresponds

Inline styling for a Cypress test on an Angular component within an SVG markup

Having difficulty grasping the significance of the data received from the API response

Encountering a hiccup when working with Angular and npm

Issue with clearing subscription upon navigating to another page is not functioning as expected

The error occurred while using NPM watch: ReferenceError: The variable "_" is not recognized in the file "../node_modules/angular-google-maps/dist/angular-google-maps.js" at line 1, column 1 (

The Angular AOT compilation process is causing essential code to be stripped away from the openlayers