Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Issue integrating Flex Monster to Angular app

Answered
David Castillo asked on October 5, 2020

Hi,

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?

Attachments:
error.PNG

8 answers

Public
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 "angular-8-flexmonster.zip" 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, 
Vera

Public
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.




Public
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,
Vera

Public
David Castillo October 7, 2020

Hello Vera,

Thank you, I’ll wait for your reply.

Public
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, 
Vera

Public
David Castillo October 8, 2020

Hi Vera,

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

Public
Vera Didenko Flexmonster 3 days ago

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

    @NgModule({
    declarations: [
    AppComponent, FlexmonsterPivot
    ],
    imports: [
    BrowserModule
    ],
    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,  
Vera 
 

Attachments:
pivot-angular4.zip

Public
David Castillo 2 days ago

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