Как исключить моментные локали из угловой сборки?

Question

В моем угловом 5 приложении, когда я создаю сборку, используя

ng build --prod --sm

и открыватель карт с открытым исходным кодом, момент занимает много места в файле main.js. Я нашел все локали загружается при использовании

import * as moment from 'moment';

Я использовал материал-момент-адаптер для некоторых функций приложения, для которых также требуется пакет момент.

Я создал приложение, используя angular-cli. Я нашел много ссылок, которые исключают локали, используя настройки в webpack.config.js. Есть ли способ исключить локали, используя angular-cli?

Answer 1

В этой статье описывается хорошее решение: https://medium.jonasbandi.net/angular-cli-and-moment-js-a-recipe-for-disaster-and-how-to-fix-it-163a79180173

Кратко:

1. ng add ngx-build-plus

2. Добавьте файл webpack.extra.js в корень вашего проекта:

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

3. Бежать:

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

Answer 2

Если вы не хотите использовать какие-либо сторонние библиотеки, самый простой способ сделать это - добавить следующее в compilerOptions вашего файла tsconfig.json

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

Answer 3

Для всех, кто старше angular 12

Это не работает для меня

      const webpack = require('webpack');

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

Однако это действительно

      const webpack = require('webpack');

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

Answer 4

В этой угловой проблеме есть еще одно решение:https://github.com/angular/angular-cli/issues/6137#issuecomment-387708972

Добавьте настраиваемый путь с именем «момент», чтобы он по умолчанию был преобразован в нужный вам JS-файл:

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

Answer 5

приведенные выше решения не сработали для меня, потому что они указывают неправильный путь (не используйте ../ ) в tsconfig.app.json

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

У меня работает в Angular 12.2.X. Изменения должны быть сделаны в tsconfig.app.json, тогда также будет работать информация о типе вашей IDE.

Не изменяйте его в tsconfig.json, иначе ваша IDE потеряет информацию о типе.

Это исправит использование в приложении, как в библиотеке. Я использовал source-map-explorer, чтобы проверить это.

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

Answer 6

В Angular 12 я сделал следующее:

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

чтобы разрешить использование настраиваемой конфигурации веб-пакета.

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

Затем измените свой angular.json следующее:

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

и в extra-webpack.config.js файл:

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

Разумеется, при необходимости измените указанные выше параметры. Это дает вам гораздо лучший контроль над тем, какие точные языковые стандарты и часовые пояса включать, в отличие от регулярного выражения, которое я вижу в некоторых других ответах.

Answer 7

У меня была такая же проблема с библиотекой momentjs , и я решил ее, как показано ниже:

Основная цель этого ответа не в том, чтобы использовать IgnorePlugin для игнорирования библиотеки, но я использую ContextReplacementPlugin , чтобы сообщить компилятору, какие файлы локали я хочу использовать в этом проекте.

1. Выполните все конфигурации, упомянутые в этом ответе: https://stackoverflow.com/a/72423671/6666348 .

2. Затем в вашем файле webpack.config.js напишите следующее:

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

Эта конфигурация добавит только локали en и fr в папку dist вашего приложения.

Answer 8

Вы можете попробовать использовать moment-mini-ts вместо moment

      npm i moment-mini-ts

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

Не забудьте удалить момент

      npm uninstall moment 

Я использую угловой 9