使用 lodash-es 作为依赖项执行 Angular Universal 时出现问题答案

【问题标题】：Problem executing Angular Universal with lodash-es as a dependency使用 lodash-es 作为依赖项执行 Angular Universal 时出现问题
【发布时间】：2018-12-03 23:55:23
【问题描述】：

我正在将现有的带有 Express 后端的 Angular 项目转换为 Angular Universal。我遇到了一个错误

<Project>\node_modules\lodash-es\cloneDeep.js:1
(function (exports, require, module, __filename, __dirname) { import baseClone from './_baseClone.js';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.lodash-es/cloneDeep (<Project>\dist\server\main.js:10303:18)

来自What is the right way to use lodash-es in Angular Universal? 我了解我需要将lodash-es 列入“白名单”。因此，我安装了@angular-builders/custom-webpack 来修改我的angular.json。我这样创建了一个 webpack 配置

const nodeExternals = require('webpack-node-externals');

module.exports = {
    externals: [
        nodeExternals({
            whitelist: [/^lodash-es/]
        })
    ]
}

并将我的angular.json 修改为

"architect": {
    "server": {
      "builder": "@angular-builders/custom-webpack:server",
      "options": {
        "customWebpackConfig": {
          "path": "./universal-webpack.config.js",
          "mergeStrategies": { "loaders": "replace" }
        },
        "outputPath": "dist/server",
        "main": "src/main.server.ts",
        "tsConfig": "src/tsconfig.server.json"
      }
    }

我在 Angular CLI 6 上，ng eject 被阻止，因此我无法验证生成的 webpack，但上述尝试无法修复错误。

注意：服务器是用 js 而不是 Typescript 编码的，所以尽管main.server.ts 经历了 webpack 构建，但 express 服务器本身并没有被 webpack 以任何方式操纵。

【问题讨论】：

标签： angular webpack angular-cli

【解决方案1】：

webpack 合并配置出错。

"customWebpackConfig": {
    "path": "./universal-webpack.config.js",
    "mergeStrategies": { "externals": "replace" }
}

是我用"mergeStrategies": { "externals": "replace" }替换"mergeStrategies": { "loaders": "replace" }的正确配置对象

【讨论】：