angular - 如何从角度构建中排除时刻语言环境？

Question

在我的 Angular 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
   

   在此处输入代码

警告 moment.js 已被正式弃用 https://momentjs.com/docs/#/-project-status/（尝试使用 day.js 或 luxon）

Answer 2

如果您不想使用任何第三方库，最简单的方法是在tsconfig.json文件的compilerOptions中添加以下内容

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

Answer 3

在这个 Angular 问题中还有另一个解决方案： https ://github.com/angular/angular-cli/issues/6137#issuecomment-387708972

添加一个名为“moment”的自定义路径，以便默认解析为您想要的 JS 文件：

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

Answer 4

在 Angular 12 中，我做了以下事情：

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

允许使用自定义 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 5

对于 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$/
    })
  ]
};