Error encountered in Angular build optimization process: TypeError - the function this._createContainer is not recognized

When compiling an Angular 7.2.5 application with --prod, a strange run-time error occurs.

The stack trace shows:

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)

Surprisingly, the file Viewer.js.pre-build-optimizer.js does contain the _createContainer function as shown below:

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;
};

This library is not native to Angular but can be found at https://github.com/bpmn-io/bpmn-js
I am unsure of how to proceed with resolving this issue while still utilizing the build optimizer.

Here are a couple of screenshots for reference:

https://i.sstatic.net/hqf8h.png

https://i.sstatic.net/lmXRC.png

angulartypescriptangular-clibpmn.io

Answer №1

Successfully resolved the issue by overriding the sideEffects setting in the troublesome modules. Using sideEffects: true informs webpack not to remove unused exports (Refer to https://webpack.js.org).

To begin, create an extra-webpack.config.js file at the root of your Angular project and add the following:

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
        }]
    }
};

Alternatively, you can use a shorter version:

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

Next, update your angular.json builder configuration to utilize the custom-webpack builder.

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

By doing this, the build optimizer will ignore these specified modules during compilation.

Answer №2

I encountered a similar issue and found that the solution involved adding the diagram.js dependency to the package.json file. Here's how it can be done:

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

The bpmn.js library relies on the diagram.js library, and the specific function (_createContainer) is inherited from it. During development, npm downloads all dependencies locally to the node_modules directory. However, when building the production version, it is important to explicitly specify all libraries used by your application.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing user sessions in Angular 5: Best practices and tips

Using the Spring Framework with 'Shiro' for authentication on the backend, And Angular 5 on the frontend. Calling the login API from Postman results in the same user session until the logout API is used, which is expected behavior. Postman UI ...

angular

Issue with mssql.connect await causing timeout in Jest

Testing some functionality in a nextjs Typescript project that needs to interact with the database directly, not relying on mocked sql query results. But encountering issues with it actually writing to the database. A brief example of the problem: /* @/li ...

sql-servertypescriptjestjsnext.js

The process of expanding a nested node in the Angular Material tree with deeply nested data

Within my Angular 7 application, I am utilizing a mat tree structure that contains nested array objects. The goal is to automatically expand specific nested sections after users make changes to the data within those sections. While I have successfully exp ...

angularangular-material-7

What is the process for refreshing an OAuth2 token? Is it necessary to wait for the token to expire before doing so? (Regarding the Patreon API)

Recently, I delved into the world of OAuth by experimenting with Patreon's API. As someone who is relatively new to the OAuth process, I relied on Patreon's Javascript Package to assist me in handling the requests. NPM: https://www.npmjs.com/pa ...

resttypescriptexpressoauth-2.0patreon

Exploring the canDeactivateFn syntax with Angular Documentation

As a first-year university student, I recently discovered that the canDeactivate() guard in Angular is deprecated, while the canDeactivateFn guard functions without any issues. Admittedly, navigating through official documentation is still new to me. From ...

angulartypescript

Encountering 'null' error in template with Angular 4.1.0 and strictNullChecks mode

After updating Angular to version 4.1.0 and activating "strictNullChecks" in my project, I am encountering numerous errors in the templates (.html) that look like this: An object may be 'null' All these errors are pointing to .html templat ...

angulartypescript

Resetting the timer of an observable in Angular 2

I have a unique service that automatically calls a method every 30 seconds. There is also a button that allows the user to reset the timer, preventing the method from being called for another 30 seconds. How can I make sure that the method does not get cal ...

angulartypescriptrxjsobservable

Angular2 Error: ngClass used in a Host component, "is not recognized as a valid native property"

Is it feasible to utilize the "ngClass" directive within the host for a component or directive? @Component({ selector: 'custom', template: `<div [ngClass]="classMap"></div> // It works <ng-content></ng-content&g ...

angularng-class

Challenges encountered when retrieving parameters from union types in TypeScript

Why can't I access attributes in union types like this? export interface ICondition { field: string operator: string value: string } export interface IConditionGroup { conditions: ICondition[] group_operator: string } function foo(item: I ...

javascripttypescript

Is Redux or Flux the default state management tool used in React?

After using npx create-react-app my-app --template typescript to create a new React app, what is the default software architecture (MVC, Redux, or Flux)? I've been researching the differences between them and it has left me feeling a bit confused. I w ...

reactjstypescriptreduxfluxtsx

A guide to integrating a component into another component in Angular

Currently, I am encountering an issue with importing a component into another in my Ionic 5.0.0 application. Within my application, I have two separate modules: ChatPageModule and HomePageModule. My objective is to include the Chat template within the Hom ...

angulartypescriptionic4

What could be causing the issue with converting a Firestore timestamp to a Date object in my Angular app?

Currently, I am developing an Angular project that involves using a FireStore database. However, I have encountered a problem with the setup. Within my Firestore database, I have documents structured like the example shown in this image: https://i.sstatic ...

javascriptangulartypescriptfirebasegoogle-cloud-firestore

Trouble Ensuring First Radio Button Is Checked in Angular 6

I'm working on setting the first radio button in a group to be checked by default. Within my application, I have 6 tabs each containing a set of scales that need to be displayed as radio buttons. The goal is to have the first button in each tab check ...

angularradio-button

tips for choosing an element using getByTestId that matches a particular value in react-testing-library

When working with React, I have a scenario where I am mapping out elements from an array. For instance: {options.map((option)=>{ return <div data-testid="option">{option}</div> }) In some cases, I need to select an option withou ...

javascripttypescriptjestjsreact-testing-library

Tips for removing the download prompt in Firefox when using Selenium in Typescript

While attempting to download a file in Firefox, a download dialog box pops up. I am looking to disable the download dialog box specifically for zip files so that they are downloaded automatically. Despite trying various preferences settings, the dialog box ...

node.jstypescriptseleniumfirefox

Issue with Typescript and MaterialUI: Module 'csstype' not found or its type declarations

As I set up a new project with Vite, I encountered a perplexing issue when running tsc that resulted in 784 errors related to MUI being unable to locate the csstype module. Here is an example of the error: node_modules/@mui/styled-engine/index.d.ts:1:22 - ...

typescriptmaterial-ui

Using TypeScript for event handling in JointJS

I am facing a challenge in adding an event handler for jointjs paper using TypeScript. I have been unable to find a way to implement it with the joint.js definition file. private paper = new joint.dia.Paper({ el: $('#paper'), ...

typescriptjointjs

Using React with Typescript: Can the parent component access data fetched from a nested child component?

Can I access data retrieved from a child component (using a graphql query) in a parent component? For example, how can I use the data fetched by React-component-4 in React-component-1? Is there a way to do this or do I have to duplicate the data fetching ...

reactjstypescriptgraphql

Angular: Observing changes in the store and sending a message from a Service component to another component once the Service has finished specific tasks

Within our codebase, we introduce two classes known as GetDataAsyncService. This service is designed to wait for a change in the store before executing the block of code contained within it. By utilizing observables and subscribing to data changes with t ...

javascriptangularrxjsngrx

Ways to generate an Angular 7 component

Seeking guidance on creating an angular 7 component. I have forked a jsFiddle at this link: https://jsfiddle.net/gauravshrestha/fdxsywLv/. The chart in the fiddle allows data points to be dragged up and down. My goal is to convert this into a component whe ...

javascriptangulartypescriptchart.js