TreeGrid error in angular-base

[joao.portella]

Hello,

I'm using several SyncFusion modules, they all work perfectly fine. My environment is Angular 18.

I'm trying to use TreeGrid but I'm getting the error below:

In my package.json I don't have "@syncfusion/ej2-base" installed, only "@syncfusion/ej2-angular-base".

Do I need to install "@syncfusion/ej2-base" package?. I ask this question because I tried to install it and my App started showing the error "Shared module is not available for eager consumption"

Our App is configured as MicroFrontends using "@angular-architects/module-federation".

After removing "@syncfusion/ej2-base", it works normally again.

Please, I ask for help because it is essential to use TreeGrid in our project.

Thank you in advance.

[Shek Mohammed Asiq Abdul Jabbar]

Hi joao.portella,

Greetings from Syncfusion Support.

After reviewing your issue, we have identified that the error, "str.match is not a function," occurs due to a version mismatch in the Syncfusion package, and it is not specifically related to the "@syncfusion/ej2-base” package. Both "@syncfusion/ej2-base” and "@syncfusion/ej2-angular-base” are part of the Syncfusion library. You can review the package.json file in the sample available through the following StackBlitz example. Additionally, we recommend checking the forum thread linked below for insights and potential resolutions:

Forum Thread: str.match is not a function Error in TreeGrid

StackBlitz sample: https://stackblitz.com/edit/angular-nhuxgk1x?file=package.json

Please ensure the following while migrating to the latest version:

1. Verify that the data passed to the TreeGrid component is in the expected format.
2. Ensure that all column templates and custom logic are compatible with the updated version.
3. Clear any cached files or dependencies (node_modules) and reinstall the packages to avoid version conflicts.
4. Ensure to package.lock.json file before installing npm packages

If the issue persists even after following the above steps, kindly share the code related to module imports and TreeGrid configuration for further investigation.

Best regards,

Shek

[joao.portella]

Hello!

Thanks for the answer, but I was unsuccessful.

Now that it is clear what happens, I have looked in many places about this error and the solution is always the upgrade path.

I made attempts with version 27.1.50 and 28.1.33. I followed the instructions exactly, and also what it says in this link: https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package

Here's my package.json:

"dependencies": {

    "@angular-architects/module-federation": "^18.0.6",

    "@angular/animations": "^18.1.0",

    "@angular/common": "^18.1.0",

    "@angular/compiler": "^18.1.0",

    "@angular/core": "^18.1.0",

    "@angular/elements": "^18.2.12",

    "@angular/forms": "^18.1.0",

    "@angular/platform-browser": "^18.1.0",

    "@angular/platform-browser-dynamic": "^18.1.0",

    "@angular/router": "^18.1.0",

    "@ngx-translate/core": "^16.0.3",

    "@ngx-translate/http-loader": "^16.0.0",

    "@pscoped/rxjs-pub-sub": "^1.0.1",

    "@syncfusion/ej2-angular-base": "^28.1.33",

    "@syncfusion/ej2-angular-buttons": "^28.1.33",

    "@syncfusion/ej2-angular-dropdowns": "^28.1.33",

    "@syncfusion/ej2-angular-inputs": "^28.1.33",

    "@syncfusion/ej2-angular-layouts": "^28.1.33",

    "@syncfusion/ej2-angular-navigations": "^28.1.33",

    "@syncfusion/ej2-angular-popups": "^28.1.33",

    "@syncfusion/ej2-angular-splitbuttons": "^28.1.33",

    "@syncfusion/ej2-angular-treegrid": "^28.1.33",

    "@syncfusion/ej2-icons": "^28.1.33",

    "@syncfusion/ej2-navigations": "^28.1.33",

    "rxjs": "~7.8.0",

    "tslib": "^2.3.0",

    "zone.js": "~0.14.3"

  }

I'm just trying to run the example from the link: https://ej2.syncfusion.com/angular/demos/#/fluent2/treegrid/treegrid-overview which is exactly what we need!

I noticed that the "str.match" error occurs because of the #template constant.

Any help is welcome!

Thanks!!

[Shek Mohammed Asiq Abdul Jabbar]

Hi joao.portella,

Thanks for your update.

We suggest the following step-by-step actions to resolve the issue:

1. Clear Dependencies:
• Delete the node_modules folder and package-lock.json file from your application directory to ensure that no outdated or conflicting dependencies remain.
2. Reinstall Packages:
• Run the npm commands to install the dependencies using the latest versions.
3. Ensure Version Consistency:
• Verify that all Syncfusion packages in your package.json file are updated to the latest compatible version (^28.1.33 in this case). Inconsistent versions between Syncfusion packages can sometimes cause runtime errors.

If the issue persists after following these steps, kindly provide the following for further investigation:

• A minimal reproducible sample or a detailed snippet of your TreeGrid implementation.
• Configuration details for module federation.

We’re here to help you resolve this issue and ensure TreeGrid functions seamlessly in your project.

Regards,
Shek

[joao.portella]

Hi,

As I said before, I had already tried this path without success.

But I did it again as described and the error continues to occur.

Attached I am sending a zip with the project structure, but I only kept the files necessary to understand what was done.

As I mentioned earlier, it is an example of your website. Anyway, with a simple treeGrid the error continues to occur if I try to use template.

The App is structured as a monorepo.

The error occurs in this Component: .\frontend\projects\mfe-governance\src\app\pages\organizational-structure

I really hope we're lucky.

Thanks in advance for any help.

Attachment: frontend_9eb27df2.zip

[Shek Mohammed Asiq Abdul Jabbar]

Hi Joao,

It appears that you have created a duplicate ticket reporting the same issue and shared the same sample for reference. Kindly follow up on the ticket for further updates.

Regards,

Shek