Angular 构建优化器 - 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

我已经设法通过覆盖有问题的模块中的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" }
  },

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

Answer 2

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

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

bpmn.js 是用 diagram.js 库编写的，这个函数 (_createContainer) 是从它继承而来的。 在开发您的应用程序时，npm 将所有依赖项本地下载到 node_modules 目录。但是，当您尝试构建 prod 版本时，您应该指定应用程序使用的所有库。