1

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

堆栈跟踪是

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
我不知道该去哪里，我想维护构建优化器。

几张截图

在此处输入图像描述

在此处输入图像描述

4

2 回答 2

2

我已经设法通过覆盖sideEffects有问题的模块中的设置来使其工作。设置sideEffects: true将告诉 webpack 修剪未使用的导出是不安全的（参见https://webpack.js.org）。

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

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" }
  },

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

于 2019-08-14T11:43:32.880 回答
1

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

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

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

于 2019-07-04T08:15:57.200 回答