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

【问题标题】：How to exclude moment locales from angular build?如何从角度构建中排除时刻语言环境？
【发布时间】：2018-04-16 07:00:41
【问题描述】：

在我的 Angular 5 应用程序中，当我使用

创建构建时

ng build --prod --sm

和开源地图浏览器，在 main.js 文件中会占用大量空间。我发现使用时会加载所有语言环境

import * as moment from 'moment';

我已将 material-moment-adapter 用于应用程序中的某些功能，这些功能也需要 moment 包。

我已经使用 angular-cli 创建了应用程序。我发现许多使用 webpack.config.js 中的设置排除语言环境的链接有没有办法使用 angular-cli 排除语言环境？

【问题讨论】：

您可以使用延迟加载或切换到本机模块获取素材。我会推荐第二个选项。
github.com/urish/ngx-moment
能否提供一些材质原生模块的示例？
我用过 moment-mini 。成功了

标签： angular angular2-moment

【解决方案1】：

这篇文章描述了很好的解决方案： https://medium.jonasbandi.net/angular-cli-and-moment-js-a-recipe-for-disaster-and-how-to-fix-it-163a79180173

简单地说：

ng add ngx-build-plus

在项目的根目录下添加一个文件 webpack.extra.js：

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

运行：

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

在此处输入代码

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

【讨论】：

当我使用这个答案时，编译器给出了这个错误发生了未处理的异常：项目'webpack.extra.js'不存在。
当我使用 ng build 更改 npm run build 时，编译器会出现此错误：发生未处理的异常：找不到模块'/Users/test/Desktop/projects/shb2c/webpack.extra.js'需要堆栈：
检查步骤 2：在项目的根目录中添加/创建 webpack.extra.js
moment.js 已弃用？

【解决方案2】：

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

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

【讨论】：

如果使用了 moment-timezone，我无法使用此解决方案。
这不提供时刻指令

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

当然可以根据需要修改上述选项。与我在其他一些答案中看到的正则表达式相反，这使您可以更好地控制要包含的确切语言环境和时区。

【讨论】：