将lodash-es作为依赖项执行Angular Universal时出现问题

Question

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

<Project>node_moduleslodash-escloneDeep.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>distservermain.js:10303:18)

在Angular Universal中使用lodash es的正确方法是什么？我知道我需要将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 CLI6上，ng eject被阻止，因此我无法验证生成的webpack，但上述尝试无法修复错误。

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

Answer 1

webpack合并配置中出现错误。

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

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