角度构建优化器-TypeError：this._createContainer不是函数

Question

使用--prod编译Angular 7.2.5应用程序会产生奇怪的运行时错误。

堆栈跟踪为

ERROR TypeError: this._createContainer is not a function
    at bg.pa (Viewer.js.pre-build-optimizer.js:143)
    at new bg (Modeler.js.pre-build-optimizer.js:129)
    at Qg.ngOnInit (diagram.component.ts:105)
    at core.js.pre-build-optimizer.js:28285
    at core.js.pre-build-optimizer.js:29961
    at Sr (core.js.pre-build-optimizer.js:29900)
    at ao (core.js.pre-build-optimizer.js:30868)
    at core.js.pre-build-optimizer.js:30811
    at Object.updateDirectives (diagram-wrapper.component.html:1)
    at Object.ro [as updateDirectives] (core.js.pre-build-optimizer.js:30799)

但是，Viewer.js.pre-build-optimizer.js文件确实包含了_createContainer函数

export default function Viewer(options) {
  options = assign({}, DEFAULT_OPTIONS, options);
  this._moddle = this._createModdle(options);        // works
  this._container = this._createContainer(options);  // <---

...

Viewer.prototype._createContainer = function(options) {
  var container = domify('<div class="bjs-container"></div>');

  assign(container.style, {
    width: ensureUnit(options.width),
    height: ensureUnit(options.height),
    position: options.position
  });

  return container;
};

该库不是本机Angular库，而是https://github.com/bpmn-io/bpmn-js
我不知道该去哪里，我想维护构建优化器。

几个截图

Answer 1

我也遇到过同样的问题。就我而言，解决方案是在 package.json 中添加 diagram.js 依赖项。像这样：

"dependencies": {
    ...
    "diagram-js": "^4.0.0"
    ...

bpmn.js 是用 diagram.js 库编写的，并且该函数（_createContainer）继承自该库。 开发应用程序 npm 时，将所有依赖项本地下载到 node_modules 目录。但是，当您尝试构建 prod 版本时，应指定应用程序使用的所有库。

Answer 2

通过覆盖有问题的模块中的sideEffects设置，我设法使它起作用。设置sideEffects: true会告诉webpack，修剪未使用的导出是不安全的（请参见https://webpack.js.org）。

---

首先，使用此内容在Angular项目的根目录中创建一个extra-webpack.config.js文件

module.exports = {
    module: {
        rules: [{
            include: [/node_modules\/moddle-xml/],
            sideEffects: true
        }, {
            include: [/node_modules\/diagram-js/],
            sideEffects: true
        }, {
            include: [/node_modules\/bpmn-js/],
            sideEffects: true
        }, {
            include: [/node_modules\/bpmn-moddle/],
            sideEffects: true
        }]
    }
};

或更短

rules: [
  {
    include: [/node_modules\/(bpmn-js|bpmn-moddle|diagram-js|moddle-xml)/],
    sideEffects: true
  }
]

---

然后，更新您的angular.json构建器配置以使用custom-webpack构建器。

"builder": "@angular-builders/custom-webpack:browser",
"options": {
  "customWebpackConfig": {
    "path": "./extra-webpack.config.js",
    "mergeStrategies": { "module.rules": "prepend" }
  },

这实际上将告诉构建优化器忽略这些模块。