Get Free Trial

Issue integrating Flex Monster to Angular app

David Castillo asked on October 5, 2020


Recently I tried to integrate Flexmonster to an existing Angular (version: 8.10) app as we have already done this in other projects.

When I run the project I get the error in the image attached. I’ve tried downgrading the version of Flexmonster but it does not work.

The only the way I found for it to compile is manually change the ng-flexmonster.metadata.json property from “version”:4 to “version”:3 which is no real solution.

Do you have any idea of how to fix this error?


8 answers

Vera Didenko Vera Didenko Flexmonster October 6, 2020

Hello, David,
Thank you for reaching out to us. 
We have not managed to reproduce the issue on our end using Angular 8 (v8.1.0) and the latest version of Flexmonster (ng-flexmonster v2.8.17). 
We have prepared a sample Angular 8 project with Flexmonster for reference (please see "" in the attachments). 
After unpacking the project, please run the following commands to start the application: 

npm i

npm start

The project will be available at http://localhost:4200/
We hope this helps to resolve the issue.
Please let us know if the sample project works fine on your end. 
Waiting for your reply.

Kind regards, 

David Castillo October 6, 2020

Hi Vera,
Thank you for providing a sample project. I got confused in my previous message. I’m running Angular v4.2.4 in Node v8.10.

To reproduce the error you can try creating a project with @angular/cli@1.4.10.

npm i -g @angular/cli@1.4.10
ng new my-app

Then, try adding the Flexmonster package and a table.

Vera Didenko Vera Didenko Flexmonster October 7, 2020

Hello, David,
Thank you for your reply and for providing steps on how to reproduce the issue.
Our team is currently working on your case.
We will make sure to reach out to you shortly.
Kind regards,

David Castillo October 7, 2020

Hello Vera,

Thank you, I’ll wait for your reply.

Vera Didenko Vera Didenko Flexmonster October 8, 2020

Hello, David,
We have managed to reproduce the issue with Angular 4.2.4 and ng-flexmonster
Our team needs some time to investigate this problem further and we will provide the results with the ETA 20th of October.
Please let us know if this would work for you.
If any additional questions arise, please feel free to reach out.
Kind regards, 

David Castillo October 8, 2020

Hi Vera,

That is fine for us. Thank you very much for the excellent support.

Vera Didenko Vera Didenko Flexmonster October 19, 2020

Hello, David, 
Thank you for giving us some time to investigate the issue.
We are glad to inform you that we have found a way to get Flexmonster working with Angular 4. 
Looking deeper, it turned out that the Angular 4 compiler cannot understand metadata files version 4 of Angular packages (Angular 5+). It can only read metadata files version 3 (Angular 4).  
The ng-flexmonster module is built using the Angular 6 toolkit. This explains why the metadata mismatch error occurred.  
With that in mind, our team kindly recommends using ng-flexmonster source code (the flexmonster.component.ts file) instead of npm.  
Please see the sample Angular 4 with Flexmonster project we have prepared for reference (“pivot-angular4” in the attachments). 
Also, we have prepared the necessary steps below for guidance

  1. Uninstall ng-flexmonster:
    npm uninstall ng-flexmonster 
  2. Download flexmonster.component.ts from GitHub and place it in your application in src/app/
  3. Install the flexmonster module:  
    npm install flexmonster --save 
  4. In app.component.ts import FlexmonsterPivot the following way:  
    import { FlexmonsterPivot } from ‘./flexmonster.component’; 

    // Use FlexmonsterPivot just like before 
  5. In app.module.ts declare the FlexmonsterPivot module:  
    import { BrowserModule } from '@angular/platform-browser'; 
    import { NgModule } from '@angular/core';

    import { FlexmonsterPivot } from './flexmonster.component';
    import { AppComponent } from './app.component';

    declarations: [
    AppComponent, FlexmonsterPivot
    imports: [
    providers: [],
    bootstrap: [AppComponent]
    export class AppModule { }
  6. Import Flexmonster styles in src/styles.css:  
    @import "../node_modules/flexmonster/flexmonster.min.css";  

Please let us know if this works. 
Looking forward to your feedback.  
Kind regards,  


David Castillo October 20, 2020

Hi Vera,

Thank you for taking the time to resolve the issue. This should work just fine, if anything happens, I will reach out to you.

Thank you for the great support!

Please login or Register to Submit Answer